Cách thêm lớp active cho phần tử hiện tại

thành phần hoạt động

Bước 1 - Thêm 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>

Bước 2 - Thêm CSS:

/* Thiết lập phong cách cho nút */
.btn {
  biên: không;
  khung viền: không;
  khoảng cách: 10px 16px;
  màu nền: #f1f1f1;
  con trỏ: chỉ thị;
}
/* Thiết lập phong cách cho lớp 'active' (và nút khi con trỏ chuột悬停) */
.active, .btn:hover {
  màu nền: #666;
  màu: trắng;
}

Bước 3 - Thêm JavaScript:

// Lấy phần tử khối
var btnContainer = document.getElementById("myDIV");
// Lấy tất cả các nút có class="btn" trong khối
var btns = btnContainer.getElementsByClassName("btn");
// Duyệt qua các nút và thêm lớp 'active' vào nút hiện tại/đã nhấp
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";
  });
}

Thử ngay

Nếu phần tử button không thiết lập lớp 'active' ban đầu, hãy sử dụng mã sau:

// Lấy phần tử khối
var btnContainer = document.getElementById("myDIV");
// Lấy tất cả các nút có class="btn" trong khối
var btns = btnContainer.getElementsByClassName("btn");
// Duyệt qua các nút và thêm lớp 'active' vào nút hiện tại/đã nhấp
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    // Nếu không có lớp 'active'
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // Thêm lớp 'active' vào nút hiện tại/đã nhấp
    this.className += " active";
  });
}

Thử ngay