บทความนี้อธิบายวิธีการใช้งานของแท็บ JS แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
1. ไอเดีย
1. รับองค์ประกอบ;
2. เพิ่มเหตุการณ์ OnClick หรือ OnMousemove เพื่อไปที่องค์ประกอบปุ่มวน
3. เมื่อคลิกปุ่มปัจจุบันมันจะปรากฏในสถานะที่ไฮไลต์ ผ่าน For Loop รูปแบบปุ่มทั้งหมดจะถูกตั้งค่าให้ว่างเปล่า ตั้งค่าการแสดงผลของ div ทั้งหมดเป็นไม่มี
4. คลิกปุ่มปัจจุบันเพื่อเพิ่มสไตล์แสดง DIV ปัจจุบันและตั้งค่าจอแสดงผลเป็นบล็อก
2. รหัส HTML:
<div id = "div1"> <อินพุต type = "ปุ่ม" value = "1"/> <อินพุต type = "ปุ่ม" value = "2"/> <อินพุต type = "ปุ่ม" value = "3"/> <อินพุตประเภท = "ปุ่ม" value = "4"/> <div style = "block;
3. ส่วน CSS:
.active {พื้นหลัง:#9cc;}. div2 {width: 300px; ความสูง: 200px; ชายแดน: 1px #66666 Solid; Display: None;}4. รหัส JS:
<script> window.onload = function () {var odiv = document.getElementById ('div1'); // รับ div var btn = odiv.getElementByTagname ('อินพุต'); // รับอินพุต var div2 = odiv.getElementByTagname ('div'); btn [i] .index = i // btn [i] เป็นปุ่ม i-th ของปุ่มที่ระบุ; เพิ่มแอตทริบิวต์ดัชนีลงในปุ่มและตั้งค่าดัชนีเป็น i btn [i] .onclick = function () // เหตุการณ์คลิก i-th ของปุ่ม {สำหรับ (i = 0; i <btn.length; i ++) // loop replate รูปแบบของปุ่ม div} this.className = 'active' // เพิ่ม active div2 [this.index] .style.display = 'block' // this.index เป็น div ปัจจุบัน}}} </script>ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน