Làm cách nào để kích hoạt một nút trong JavaScript?

Lớp giả :active thường được sử dụng trên các phần tử <a> và <button>. Các mục tiêu phổ biến khác của lớp giả này bao gồm các phần tử được chứa trong một phần tử được kích hoạt và các phần tử biểu mẫu đang được kích hoạt thông qua <label> được liên kết của chúng

Các kiểu được xác định bởi lớp giả :active sẽ bị ghi đè bởi bất kỳ lớp giả nào liên quan đến liên kết tiếp theo (

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

Ghi chú. Trên các hệ thống có chuột nhiều nút, CSS chỉ định rằng lớp giả :active chỉ được áp dụng cho nút chính;

Đoạn mã JavaScript để thêm lớp “hoạt động” vào bất kỳ nút hoặc div nào để chuyển đổi trạng thái hoạt động. Hữu ích cho việc thay đổi kiểu dáng và hình thức của nút được nhấp. Đoạn mã bên dưới sẽ thêm trình xử lý sự kiện nhấp chuột vào phần tử có ID “myDiv”. Sau đó, thêm lớp “đang hoạt động” hoặc xóa thay thế nếu đã thêm

Đoạn 1 (Villa JavaScript)

document.getElementById("myDiv")
.addEventListener("click", function() {
  if (this.classList.contains("active")) {
    this.classList.remove("active");
  } else this.classList.add("active");
});

Thí dụ

Ví dụ này sử dụng đoạn mã trên để theo dõi trạng thái đóng/mở nắp nút

Đoạn 2 (với jQuery)

$('#myDiv').click(function(){
   $(this).toggleClass('active');
});

Ghi chú

Một số nhà phát triển sử dụng hộp kiểm “hack” để lưu trạng thái nút thay vì sử dụng JavaScript. Bạn có thể muốn xem xét điều này nếu bạn đang tìm cách tiếp cận CSS thuần túy

Làm cách nào để đặt nút hoạt động trong JavaScript?

Làm cách nào để kích hoạt một nút trong JavaScript?

Làm cách nào để kích hoạt nút trong HTML?

Làm cách nào để làm cho một nút không hoạt động trong JavaScript?