Hướng dẫn add class active javascript - thêm lớp javascript hoạt động

$(document).ready(function(){
        var menuClass = localStorage.getItem('menuClass')

        var element = document.getElementById(menuClass);

        if (element) {
          element.classList.add('active');
        } else {
          element = document.getElementById("home");
          element.classList.add('active');
        }

        $(".toggle").click(function () {
          $(this).toggleClass("active");
          $('.navigation').toggleClass("active");
        });

        $(document).on('click', 'ul .list', function () {
          let menu = $(this).attr("id")

          $(this).addClass('active').siblings().removeClass('active');

          localStorage.setItem('menuClass', menu);
        })
})

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

/ * 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;}

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