ວິທີການປະກອບບັນຊົມຫຼິ້ນ active ຕໍ່ປະກອບສະເພາະ:

ສັດນິວເຫຍື້ອກິດຈະກໍາ

ບາງຄັ້ງທີໜຶ່ງ - ເພີ່ມ 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>

ບາງຄັ້ງທີສອງ - ເພີ່ມ CSS:

/* ການກໍ່ຕັ້ງຮູບແບບບັນບາງນິວເຫຍື້ອ */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
/* ການກໍ່ຕັ້ງຮູບແບບສັນຍານ active (ແລະບັນບາງນິວເຫຍື້ອທີ່ຖືກຍົກຖືກຈາກໄຫວໄກນິວເຫຍື້ອ) */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

ບາງຄັ້ງທີສາມ - ເພີ່ມ JavaScript:

// ການຊອກຫາບັນດາສັດນິວເຫຍື້ອ
var btnContainer = document.getElementById("myDIV");
// ການຊອກຫານິວເຫຍື້ອທີ່ມີ class="btn" ໃນບໍລິສັດ
var btns = btnContainer.getElementsByClassName("btn");
// ການເສັງບັນບາງນິວເຫຍື້ອ ແລະເພີ່ມປະເພດ active ທີ່ຢູ່ປະຈຸບັນ/ຖືກກົດສະຫຼົກ
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";
  });
}

亲自试一试

ຖ້າບັນດາສັດ button ບໍ່ໄດ້ກວດກາປະເພດ active ທຳອິດຫຼັງຈາກນັ້ນໃຊ້ລະຫັດລວມນີ້:

// ການຊອກຫາບັນດາສັດນິວເຫຍື້ອ
var btnContainer = document.getElementById("myDIV");
// ການຊອກຫານິວເຫຍື້ອທີ່ມີ class="btn" ໃນບໍລິສັດ
var btns = btnContainer.getElementsByClassName("btn");
// ການເສັງບັນບາງນິວເຫຍື້ອ ແລະເພີ່ມປະເພດ active ທີ່ຢູ່ປະຈຸບັນ/ຖືກກົດສະຫຼົກ
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    // ຖ້າບໍ່ມີປະເພດ active
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // ເພື່ອເພີ່ມການເຊື່ອມປະເພດ active ທີ່ຢູ່ປະຈຸບັນ/ຖືກກົດສະຫຼົກ
    this.className += " active";
  });
}

亲自试一试