Hoe voeg je de 'active' klasse toe aan het huidige element?

Actieve elementen

Eerste stap - Voeg HTML toe:

<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>

Tweede stap - Voeg CSS toe:

/* Stel stijlen in voor de knoppen */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
/* Stel stijlen in voor de class 'active' (en de knoppen bij muisovergang) */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

Derde stap - Voeg JavaScript toe:

// Haal het container-element op
var btnContainer = document.getElementById("myDIV");
// Haal alle knoppen met class="btn" in de container op
var btns = btnContainer.getElementsByClassName("btn");
// Loop door de knoppen en voeg de class 'active' toe aan de huidige/klikkende knop
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";
  });
}

Try it yourself

Als de button-element niet oorspronkelijk de class 'active' heeft ingesteld, gebruik dan de volgende code:

// Haal het container-element op
var btnContainer = document.getElementById("myDIV");
// Haal alle knoppen met class="btn" in de container op
var btns = btnContainer.getElementsByClassName("btn");
// Loop door de knoppen en voeg de class 'active' toe aan de huidige/klikkende knop
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    // Als er geen class 'active' is
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // Voeg de class 'active' toe aan de huidige/klikkende knop
    this.className += " active";
  });
}

Try it yourself