บทความนี้ได้แชร์รหัสเพื่อใช้เอฟเฟกต์การสลับแท็บแท็บใน JS ดั้งเดิมสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. html ส่วน
<body> <div id = "tab"> <div> <ul> <li> <a href = "#"> กิจการปัจจุบัน </a> </li> <li> <a href = "#"> กีฬา </a> </li> <li> <a href = "#"> ความบันเทิง </a> </li> <div> ความบันเทิง </div> </div> </body>
2.CSS PART: มีหลายวิธีในการใช้ส่วนสไตล์ นี่คือตัวอย่างง่ายๆที่ฉันเขียน CSS ที่ฉันแย่ที่สุด -
.tab_menu .Selected {พื้นหลังสี: #aaa;} .tab_menu ul {ความสูง: 30px;} .tab_menu ul li {float: ซ้าย; รายการสไตล์: ไม่มี; ความกว้าง: 50px; ความสูง: 30px; สี:#000; สีเทา; ขอบด้านล่าง: ไม่มี; text-align: center; line-height: 30px; margin-right: 3px;} .tab_menu ul li a {การกำหนดข้อความ: ไม่มี;} .tab_box {width: 170px; ความสูง: 150px;3. ส่วนสำคัญ JS:
window.onload = function () {var otab = document.getElementById ('แท็บ'); var Ali = otab.getElementsByTagname ('li'); var otabbox = otab.getElementsByTagname ('div') [1]; var abox = otabbox.getElementsByTagname ('div'); สำหรับ (var i = 0; i <ali.length; i ++) {Ali [i] .index = i; Ali [i] .onclick = function () {สำหรับ (var j = 0; j <ali.length; j ++) {Ali [j] .className = ''; // ยกเลิกรูปแบบเมนู abox [j] .classname = 'ซ่อน'; // ซ่อน tabdivs} ทั้งหมด abox [this.index] .className = ''; -นี่เป็นเรื่องง่ายและหยาบและไม่พิจารณาว่า Tabmenu และ Tabbox มีหลายสไตล์หรือไม่และการไม่ปรับตัวเข้ากับโครงการเป็นเพียงวิธีคิด หลายสถานที่ต้องได้รับการปรับปรุง ต่อไปนี้คือการพิจารณาสถานการณ์ที่มีการติดแท็กหลายคลาส แต่โดยทั่วไปมีหลายคลาส ตอนนี้เราต้องใช้ทักษะเพื่อลบคลาสที่แน่นอนและเพิ่มคลาส
3.1 เพิ่มและลบคลาสใน JS ดั้งเดิม
window.onload = function () {var otab = document.getElementById ('แท็บ'); var Ali = otab.getElementsByTagname ('li'); var otabbox = otab.getElementsByTagname ('div') [1]; var abox = otabbox.getElementsByTagname ('div'); สำหรับ (var i = 0; i <ali.length; i ++) {Ali [i] .index = i; Ali [i] .onclick = function () {สำหรับ (var j = 0; j <ali.length; j ++) {var aclass = Ali [j] .classname.split (''); // element.classname เป็นสตริง z = 0; z <aclass.length; z ++) {ถ้า (aclass [z] == 'เลือก') {aclass.splice (z, 1); // ใช้วิธีการสปิทของอาร์เรย์เพื่อลบคลาสที่พบ}} สำหรับ (var k = 0; ACLASS1.SPLICE (K, 1); }} Ali [J] .className = aclass.join ('); // เมนูทั้งหมดลบสไตล์ abox ที่เลือก [j] .className+=' ซ่อน '; // กล่องทั้งหมดซ่อน abox [this.index] .className = aclass1.join (' ') สไตล์} } } }การทดสอบส่วนบุคคลนั้นมีประสิทธิภาพ แต่พวกเขาก็ยุ่งเล็กน้อยในวิธีเดียว ยิ่งกว่านั้นเมื่อมีชั้นเรียนมากมายประสิทธิภาพก็เป็นปัญหาเช่นกัน แต่ไม่ควรมีคลาสมากมาย == ปรับให้เหมาะสมในอนาคต ฟังก์ชั่นนี้ใช้งานง่ายมาก
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น