Lớp giả CSS :active đại diện cho một phần tử (chẳng hạn như nút) đang được người dùng kích hoạt. Khi sử dụng chuột, "kích hoạt" thường bắt đầu khi người dùng nhấn nút chuột chính
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> 1, <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> 2 hoặc <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> 3) có tính đặc hiệu ít nhất bằng nhau. Để tạo kiểu liên kết phù hợp, hãy đặt quy tắc :active sau tất cả các quy tắc liên quan đến liên kết khác, như được xác định theo thứ tự LVHA. <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> 1 — <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> 3 — <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> 2 — :active
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