ప్రస్తుత ఎలిమెంట్ని క్రియాశీల క్లాస్ జోడించడం ఎలా చేస్తారు

కార్యకలాపం మెటాడాటా

మొదటి చర్య - HTML జోడించండి:

<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

రెండవ చర్య - CSS జోడించండి:

/* బటన్ స్టైల్స్ సెట్ చేయండి */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
/* active క్లాస్ (మరియు మౌస్ హోవర్ బటన్ను) స్టైల్స్ సెట్ చేయండి */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

మూడవ చర్య - JavaScript జోడించండి:

// కంటైనర్ మెటాడాటా పొందండి
var btnContainer = document.getElementById("myDIV");
// కంటైనర్లో అన్ని class="btn" బటన్ను పొందండి
var btns = btnContainer.getElementsByClassName("btn");
// బటన్ను పరిశీలించండి మరియు ప్రస్తుతం/క్లిక్ చేసిన బటన్నుకు active క్లాస్ జోడించండి
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

亲自试一试

బటన్ మెటాడాటా ప్రారంభంలో active క్లాస్ సెట్ చేయలేకపోతే ఈ కోడ్ను వాడండి:

// కంటైనర్ మెటాడాటా పొందండి
var btnContainer = document.getElementById("myDIV");
// కంటైనర్లో అన్ని class="btn" బటన్ను పొందండి
var btns = btnContainer.getElementsByClassName("btn");
// బటన్ను పరిశీలించండి మరియు ప్రస్తుతం/క్లిక్ చేసిన బటన్నుకు active క్లాస్ జోడించండి
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    // సమస్య క్లాస్ లేకపోతే
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // ప్రస్తుతం/క్లిక్ చేసిన బటన్నుకు active క్లాస్ జోడించండి
    this.className += " active";
  });
}

亲自试一试