वर्तमान एलीमेंट को 'active' क्लास कैसे जोड़ें:

सक्रिय एलेमेंट

पहला चरण - 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";
  });
}

अपने आप साबित करें

यदि button एलेमेंट पहले से 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");
    // यदि active वर्ग नहीं है
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // वर्तमान/सक्रिय बटन पर active वर्ग जोड़ें
    this.className += " active";
  });
}

अपने आप साबित करें