چگونه کلاس 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 {
  لبه: هيچ;
  حاشيه: هيچ;
  حاشيه: 10px 16px;
  رنگ پس‌زمينه: #f1f1f1;
  دسته: اشاره‌گر;
}
/* استايل كلاس active (و دكمه‌هاي حالت ماوس بالاي آن) را تنظيم كنيد */
.active, .btn:hover {
  رنگ پس‌زمينه: #666;
  رنگ: سفيد;
}

مرحله سوم - اضافه كردن JavaScript:

// عنصر كانتينر را بگيريد
var btnContainer = document.getElementById("myDIV");
// همه دكمه‌هاي كلاس="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");
// همه دكمه‌هاي كلاس="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";
  });
}

خودتان امتحان کنید