ใช้แอปพลิเคชันแท็บปลั๊กอินนี้ค่อนข้างง่าย
ไฟล์ซอร์สโค้ด:
tab.js
หลักการดำเนินการ
1. เมื่อคลิกองค์ประกอบก่อนอื่นให้ยกเลิกองค์ประกอบที่ไฮไลต์เดิม
2. จากนั้นเน้นองค์ประกอบที่คลิก
3. หากคลิกองค์ประกอบเป็นตัวเลือกในกล่องดรอปดาวน์ให้เลือกตัวเองและเลือกกล่องดรอปดาวน์
5. หากมีการกำหนดภาพเคลื่อนไหวให้ดำเนินการภาพเคลื่อนไหวก่อนแล้วจึงโทรกลับ
การวิเคราะห์ซอร์สโค้ด:
1. วิธีการแสดงจะถูกเรียกใช้เมื่อมีการคลิกองค์ประกอบซึ่งจะเรียกเหตุการณ์สี่เหตุการณ์ต่อไปนี้
1.1. hiden.bs.tab: ซ่อนองค์ประกอบก่อนหน้า
1.2. show.bs.tab: แสดงองค์ประกอบปัจจุบัน
1.3. hideen.bs.tab: เสร็จสิ้นโดยซ่อนองค์ประกอบก่อนหน้า
1.4. แสดง. bs.tab: แสดงองค์ประกอบปัจจุบันเสร็จสมบูรณ์
1.5. HIDEN/แสดงซอร์สโค้ดเหตุการณ์:
var $ previous = $ ul.find ('. active: สุดท้าย') var hideEvent = $ .EVENT ('hide.bs.tab', {เกี่ยวข้องกับเป้าหมาย: $ this [0]}) var showevent = $. event ('show.bs.tab'2. ใช้งาน: เปิดใช้งานวัตถุปัจจุบัน
2.1. เพิ่มแอตทริบิวต์ Aria ที่ขยายไปยังองค์ประกอบการนำทางเพื่อทำเครื่องหมายว่าองค์ประกอบนี้อยู่ในสถานะขยาย
2.2. การใช้กลไก Reflow ใช้แอตทริบิวต์ OffsetWidth เพื่อให้ได้การทาสีบางส่วน
การสนทนาสั้น ๆ ข้างต้นเกี่ยวกับแท็บการวิเคราะห์ซอร์สโค้ด Bootstrap (TAB) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น