วิธีการเพิ่มคลาส active ให้กับองค์ประกอบปัจจุบัน

เรียนรู้วิธีการใช้ JavaScript เพิ่มคลาส 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:

// ค้นหาส่วนที่มี id="myDIV"
var btnContainer = document.getElementById("myDIV");
// ค้นหาปุ่มที่มี class="btn" ในส่วนที่กำหนด
var btns = btnContainer.getElementsByClassName("btn");
// วนเวียนปุ่ม และใส่คลาส active ในปุ่มที่กด/ที่มีคลาส 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";
  });
}

亲自试一试

หากปุ่ม element ไม่มีคลาส active ตอนแรก ใช้โค้ดดังนี้:

// ค้นหาส่วนที่มี id="myDIV"
var btnContainer = document.getElementById("myDIV");
// ค้นหาปุ่มที่มี class="btn" ในส่วนที่กำหนด
var btns = btnContainer.getElementsByClassName("btn");
// วนเวียนปุ่ม และใส่คลาส active ในปุ่มที่กด/ที่มีคลาส 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 ในปุ่มที่กด/ที่มีคลาส active
    this.className += " active";
  });
}

亲自试一试