How to add the active class to the current element

Aktives Element

Erster Schritt - Fügen Sie HTML hinzu：

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

Zweiter Schritt - Fügen Sie CSS hinzu：

/* Setzen Sie das Stil für die Buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
/* Setzen Sie das Stil für die Klasse 'active' (sowie für den Button bei Mausüberfahren) */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

Dritter Schritt - Fügen Sie JavaScript hinzu：

// Erhalten Sie das Container-Element
var btnContainer = document.getElementById("myDIV");
// Erhalten Sie alle Buttons mit der Klasse 'btn' im Container
var btns = btnContainer.getElementsByClassName("btn");
// Durchsuchen Sie die Buttons und fügen Sie die Klasse 'active' zum aktuellen/klicken Button hinzu
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

Wenn der Button-Element一开始没有设置 active 类，请使用以下代码：

// Erhalten Sie das Container-Element
var btnContainer = document.getElementById("myDIV");
// Erhalten Sie alle Buttons mit der Klasse 'btn' im Container
var btns = btnContainer.getElementsByClassName("btn");
// Durchsuchen Sie die Buttons und fügen Sie die Klasse 'active' zum aktuellen/klicken Button hinzu
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    // Wenn es keine Klasse 'active' gibt
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // Fügen Sie die Klasse 'active' zum aktuellen/klicken Button hinzu
    this.className += " active";
  });
}

Try it yourself