Mafaa hatau kigeuka kikaa kwa klabu ya 'active' kwa elementi ya hivi karibuni

Elementi ya kina

Tathmini 1 - Ingiza 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>

Tathmini 2 - Ingiza CSS:

/* Kufikia stili ya butoni */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
/* Kufikia stili ya class ya 'active' (na butoni ya kigeukia kwa sababu ya kifua msahau)) */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

Tathmini 3 - Ingiza JavaScript:

// Pata elementi ya kuuza kwa sababu ya id
var btnContainer = document.getElementById("myDIV");
// Pata taarifu za butoni zote za class="btn" kwa kuuza kwa sababu ya id
var btns = btnContainer.getElementsByClassName("btn");
// Tafuta butoni, na angiza class ya 'active' kwa butoni ya sasa au ya kigeukia
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";
  });
}

Kuhukamilika: Tafuta kina

Kama button elementi haujafikia class ya 'active' kuanzia mbali mbali, tumia kwa kufikia hapa kwaandikia:

// Pata elementi ya kuuza kwa sababu ya id
var btnContainer = document.getElementById("myDIV");
// Pata taarifu za butoni zote za class="btn" kwa kuuza kwa sababu ya id
var btns = btnContainer.getElementsByClassName("btn");
// Tafuta butoni, na angiza class ya 'active' kwa butoni ya sasa au ya kigeukia
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    // Ikiwa kuna class ya 'active'
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // Ingiza class ya 'active' kwa butoni ya sasa au ya kigeukia
    this.className += " active";
  });
}

Kuhukamilika: Tafuta kina