Hướng dẫn how do you make an active class in javascript? - làm thế nào để bạn tạo một lớp hoạt động trong javascript?

Bước 2) Thêm CSS:

Thí dụ

& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

Bước 2) Thêm CSS:
.active, .btn:hover {
  background-color: #666;
  color: white;
}

/ * Kiểu các nút */. Btn {& nbsp; Biên giới: Không có; & nbsp; Phác thảo: Không có; & nbsp; Đệm: 10px 16px; & nbsp; màu nền: #f1f1f1; & nbsp; con trỏ: con trỏ;}

Thí dụ

& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
var btnContainer = document.getElementById("myDIV");

Bước 2) Thêm CSS:
var btns = btnContainer.getElementsByClassName("btn");

/ * Kiểu các nút */. Btn {& nbsp; Biên giới: Không có; & nbsp; Phác thảo: Không có; & nbsp; Đệm: 10px 16px; & nbsp; màu nền: #f1f1f1; & nbsp; con trỏ: con trỏ;}
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";
  });
}

Hãy tự mình thử »

Yếu tố hoạt động

Thí dụ

& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
var btnContainer = document.getElementById("myDIV");

Bước 2) Thêm CSS:
var btns = btnContainer.getElementsByClassName("btn");

/ * Kiểu các nút */. Btn {& nbsp; Biên giới: Không có; & nbsp; Phác thảo: Không có; & nbsp; Đệm: 10px 16px; & nbsp; màu nền: #f1f1f1; & nbsp; con trỏ: con trỏ;}
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

/ * Kiểu lớp Active (và các nút trên chuột-over) */. Active, .btn: Hover {& nbsp; màu nền: #666; & nbsp; màu trắng;}
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

Bước 3) Thêm JavaScript:
    this.className += " active";
  });
}

Hãy tự mình thử »

Tôi đang cố gắng tạo một menu điều hướng Tôi đã thực hiện tất cả các HTML và CSS khi đến JavaScript Tôi bị tấn công ở giữa tôi có thể thêm một lớp vào phần tử, nhưng tôi không thể loại bỏ các phần tử còn lại. Xin hãy giúp tôi với. Đây là mã của tôi
here is my code

Và đây là Codepen của tôiCodepen

Hỏi ngày 17 tháng 8 năm 2016 lúc 7:06Aug 17, 2016 at 7:06

3

Sử dụng NO___Trans___Pre___23 để tìm phần tử hiện có lớp NO___TRANS___PRE___24, sau đó bạn có thể xóa lớp đó.

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

JSfiddle

Thay vì không

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

JSfiddle 2

Chỉnh sửa

Thay vì lặp qua toàn bộ bộ sưu tập, bạn có thể chọn phần tử có lớp no___trans___pre___24 bằng document.querySelector. Cũng cung cấp NO___Trans___Pre___28 cho UL để bạn có thể nhắm mục tiêu phần tử cụ thể

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}