วิธีการเพิ่มคลาส 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"; }); }