Khi click một nút trong nhóm, xóa class active của nút cũ, thêm cho nút vừa click.
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> .btn { border: none; outline: none; padding: 10px 16px; background-color: #6ea2f0; cursor: pointer; color:white; font-size: 18px; } .active, .btn:hover { background-color: #666; color: white; } </style> </head> <body> <h1>Active Button Example</h1> <div id="sampleDiv"> <button class="btn">Hươu cao cổ</button> <button class="btn active">Bò</button> <button class="btn">Sư tử</button> <button class="btn">Báo</button> <button class="btn">Guepard</button> </div> <h2>Nhấn bất kỳ nút nào để đặt active cho nó</h2> <script> var btns = document.querySelectorAll(".btn"); Array.from(btns).forEach(item => { item.addEventListener("click", () => { var selected = document.getElementsByClassName("active"); selected[0].className = selected[0].className.replace(" active", ""); item.className += " active"; }); }); </script> </body> </html>
Kết quả
Chỉ một nút có class active (màu xám) tại một thời điểm.