Come aggiungere la classe active all'elemento corrente
- Pagina precedente Modifica classe
- Pagina successiva Vista ad albero
Impara come utilizzare JavaScript per aggiungere la classe active all'elemento corrente.
Evidenziare il pulsante attivo/attuale (Premuto)
Elemento attivo
Passo 1 - Aggiungi 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>
Passo 2 - Aggiungi CSS:
/* Imposta lo stile del pulsante */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; } /* Imposta lo stile per la classe 'active' (e il pulsante quando il mouse è sopra) */ .active, .btn:hover { background-color: #666; color: white; }
Passo 3 - Aggiungi JavaScript:
// Ottieni l'elemento contenitore var btnContainer = document.getElementById("myDIV"); // Ottieni tutti i pulsanti con class="btn" all'interno del contenitore var btns = btnContainer.getElementsByClassName("btn"); // Percorri i pulsanti e aggiungi la classe 'active' al pulsante corrente/cliccato 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"; }); }
Se l'elemento button non ha impostato la classe 'active' all'inizio, usa il seguente codice:
// Ottieni l'elemento contenitore var btnContainer = document.getElementById("myDIV"); // Ottieni tutti i pulsanti con class="btn" all'interno del contenitore var btns = btnContainer.getElementsByClassName("btn"); // Percorri i pulsanti e aggiungi la classe 'active' al pulsante corrente/cliccato for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); // Se non c'è la classe 'active' if (current.length > 0) { current[0].className = current[0].className.replace(" active", ""); } // Aggiungi la classe 'active' al pulsante corrente/cliccato this.className += " active"; }); }
- Pagina precedente Modifica classe
- Pagina successiva Vista ad albero