Come aggiungere la classe active all'elemento corrente

Impara come utilizzare JavaScript per aggiungere la classe active all'elemento corrente.

Evidenziare il pulsante attivo/attuale (Premuto)

Prova personalmente

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";
  });
}

Prova personalmente

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";
  });
}

Prova personalmente