Comment ajouter la classe active à l'élément courant

Élément actif

Étape 1 - Ajouter 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>

Étape 2 - Ajouter CSS :

/* Définir les styles des boutons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
/* Définir les styles pour la classe 'active' (et le bouton au survol de la souris) */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

Étape 3 - Ajouter JavaScript :

// Obtenir l'élément de conteneur
var btnContainer = document.getElementById("myDIV");
// Obtenir tous les boutons avec la classe 'btn' à l'intérieur du conteneur
var btns = btnContainer.getElementsByClassName("btn");
// Parcourir les boutons et ajouter la classe 'active' au bouton actuel/clic
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

Si l'élément 'button' n'a pas de classe 'active' dès le départ, utilisez le code suivant :

// Obtenir l'élément de conteneur
var btnContainer = document.getElementById("myDIV");
// Obtenir tous les boutons avec la classe 'btn' à l'intérieur du conteneur
var btns = btnContainer.getElementsByClassName("btn");
// Parcourir les boutons et ajouter la classe 'active' au bouton actuel/clic
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    // Si la classe 'active' n'existe pas
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // Ajouter la classe 'active' au bouton actuel/clic
    this.className += " active";
  });
}

Try it yourself