چگونه به عنصر فعلی کلاس active اضافه کنید

عنصر فعال

پہلا قدم - ہیٹھلے کو اضافہ کریں:

<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>

دوسرا قدم - سی ایس ایس کو اضافہ کریں:

/* بوتن کا استایل سیٹ کریں */
.btn {
  کوسٹنگ نہ کریں;
  کوسٹنگ نہ کریں;
  کوسٹنگ: 10px 16px;
  پس منظر رنگ: #f1f1f1;
  cursor: pointer;
}
/* active کلاس (اور موس کی چکر کے وقت کسی بوتن) کا استایل سیٹ کریں */
.active, .btn:hover {
  پس منظر رنگ: #666;
  رنگ: سفید;
}

تینواں قدم - جاوا سکریپٹ کو اضافہ کریں:

// کانٹینر عنصر کو حاصل کریں
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");
    // اگر active کلاس نہ ہو
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // جوهر active کلاس کو کسی بوتن کا آخری/کسی بوتن کو جو کلک کیا گیا ہے، اضافہ کریں
    this.className += " active";
  });
}

خود کارا طور پر کوشش کریں