การวิเคราะห์ที่ครอบคลุมของวิธีการสลับหน้าแท็บ

วิธีการสลับแท็บมีดังนี้:

1. ควบคุมการแสดงผลและซ่อนแท็บ

2. แท็บไม่สลับข้อมูลจะถูกโหลด

ควบคุมการแสดงผลและซ่อนแท็บ

สคริปต์ส่วนหน้า:

1. การใช้งาน jQuery:

 $ (function () {$ (". sdkj-tabs li") คลิก (ฟังก์ชั่น () {$ (นี่) .addclass ("on"). พี่น้อง (). RemoveClass ("on"); var index = $ ("SDKJ-tabs li "). ดัชนี (สิ่งนี้); $ (". cont-tabs> div "). eq (ดัชนี). show (). พี่น้อง (). ซ่อน ();});});

แนะนำไฟล์ jQuery รหัสง่าย

ไฟล์ jQuery มีขนาดใหญ่เบราว์เซอร์ไม่เข้ากัน

2. การใช้งาน JS

 ฟังก์ชั่น selectTab (showcontent, selfobj) {var tab = document.getElementById ("sdkj-tabs"). getElementsByTagname ("li"); var tablength = tab.length; สำหรับ (i = 0; j = document.getElementById ("cont-tab"+i);

ไม่จำเป็นต้องแนะนำไฟล์ jQuery

ปริมาณรหัสมีขนาดใหญ่และต้องใช้ฟังก์ชันและรหัสสำหรับแต่ละแท็ก

3. การใช้งานปลั๊กอิน

 tabs var = function () {แท็กฟังก์ชั่น (ชื่อ, elem) {return (elem || document) .getElementByTagname (ชื่อ);} // รับองค์ประกอบของ ID ฟังก์ชั่น ID ที่สอดคล้องกัน (ชื่อ) {return document.getElementById (ชื่อ);} ฟังก์ชั่นแรก elem: ถัดไป (elem);} ฟังก์ชั่นถัดไป (elem) {elem = elem.nextsibling; ในขณะที่ (elem) {ถ้า (elem.nodetype == 1) {return elem;} else {elem = elem.nextsibling; ELEM_CHILD = First (Elem); สำหรับ (array_int = 0; elem_child; array_int ++) {// console.log ("elem:"+elem); array [array_int] = elem_child; elem_child = next (elem_child); elem = tag ("li", id (elemid)); var tabs = child (id (tabid)); var listnum = elem.length; var tabnum = tabs.length; console.log (แท็บ); สำหรับ (var i = 0; i <listnum; i ++) j = 0; j <3; j ++) {ถ้า (i == j) {แท็บ [j] .style.display = "block"; elem [j] .classname = "on";} else {tabs [j] .style.display = "ไม่มี"; elem [j] ";}}}}}) (i)}}}} (); tabs.set (" sdkj-tabs "," cont-tabs "); // ดำเนินการ

ไม่จำเป็นต้องแนะนำไฟล์ jQuery เพียงเพิ่ม ID องค์ประกอบหลัก

ข้างต้นเป็นคำอธิบายแบบเต็มของการวิเคราะห์ที่ครอบคลุมของวิธีการสลับของหน้าแท็บที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!