Jak dodać klasę active do bieżącego elementu
- Poprzednia strona Zmień klasę
- Następna strona Widok drzewa
Naucz się, jak używać JavaScript do dodania klasy active do bieżącego elementu.
Podświetl aktywny/obecny (naciśnięty) przycisk:
Aktywny element
Krok pierwszy - Dodaj HTML:
<div id="myDIV"> <button class="btn">1</button> <button class="btn active">2</button> <button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button> </div>
Krok drugi - Dodaj CSS:
/* Ustaw styl przycisków */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; } /* Ustaw styl dla klasy 'active' (oraz przycisku z podświetleniem myszy) */ .active, .btn:hover { background-color: #666; color: white; }
Krok trzeci - Dodaj JavaScript:
// Pobierz element kontenera var btnContainer = document.getElementById("myDIV"); // Pobierz wszystkie przyciski z klasą 'btn' w kontenerze var btns = btnContainer.getElementsByClassName("btn"); // Przejdź przez przyciski i dodaj klasę 'active' do bieżącego/klikniętego przycisku 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"; }); }
Jeśli element przycisku nie ma ustawionej klasy 'active' na początku, użyj następującego kodu:
// Pobierz element kontenera var btnContainer = document.getElementById("myDIV"); // Pobierz wszystkie przyciski z klasą 'btn' w kontenerze var btns = btnContainer.getElementsByClassName("btn"); // Przejdź przez przyciski i dodaj klasę 'active' do bieżącego/klikniętego przycisku for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); // Jeśli nie ma klasy 'active' if (current.length > 0) { current[0].className = current[0].className.replace(" active", ""); } // Dodaj klasę 'active' do bieżącego/klikniętego przycisku this.className += " active"; }); }
- Poprzednia strona Zmień klasę
- Następna strona Widok drzewa