تحليل شامل لطريقة تبديل صفحات علامة التبويب

طريقة تبديل علامات التبديل هي كما يلي:

1. التحكم في العرض وإخفاء علامات التبويب

2. علامة التبويب لا تبديل ، يتم تحميل البيانات

التحكم في شاشة وإخفاء علامات التبويب

السيناريو الأمامي:

1. تنفيذ jQuery:

 $ (function () {$ (". li "). index (this) ؛ $ (". cont-tabs> div "). Eq (index) .Show (). Siblings ().

تقديم ملفات jQuery ، الرمز بسيط

ملف jQuery كبير ، المستعرض غير متوافق

2. تنفيذ JS

 الوظيفة selecttab (showcontent ، selfobj) {var tab = document.getElementById ("sdkj-tabs"). getElementsByTagName ("li") ؛ var tablength = tab.length ؛ for (i = 0 ؛ i <lablengle ؛ i ++) {tab [i] .classname = "؛ j = document.getElementById ("cont-tab"+i) ؛

لا حاجة لتقديم ملفات jQuery

حجم الكود كبير ، والوظائف والمعرفات مطلوبة لكل علامة

3. تنفيذ المكونات

 var tabs = function () {function tag (name ، elem) {return (elem || document) .getElementsByTagName (name) ؛} // احصل على عنصر معرف المعرف المقابل (الاسم) {return document.getElementById (name) ؛ elem: التالي (elem) ؛} الوظيفة التالية (elem) {elem = elem.nextsibling ؛ بينما (elem) {if (elem.nodeType == 1) {return elem ؛} else {elem = elem.nextsibling ؛ elem_child = first (elem) ؛ for (array_int = 0 ؛ elem_child ؛ array_int ++) {// console.log ("elem:"+elem) ؛ shyps [array_int] = elem_child ؛ elem_child = next (elem_child) ؛} return ؛ elem = tag ("li" ، id (elemid)) ؛ var tabs = child (id (tabId)) ؛ var listnum = elem.length ؛ var tabnum = tabs.length ؛ console.log (tabs) ؛ for (var i = 0 ؛ i <listnum ؛ i ++) {elem [i] j = 0 ؛ j <3 ؛ j ++) {if (i == j) {tabs [j] .style.display = "block" ؛ elem [j] .classname = "on" ؛ "؛}}}}}) (i)}}}}} () ؛ tabs.set (" sdkj-tabs "،" cont-tabs ") ؛ // execute

لا حاجة لتقديم ملفات jQuery ، ما عليك سوى إضافة معرف العناصر الأصل

ما سبق هو الوصف الكامل للتحليل الشامل لطريقة التبديل لصفحة علامة التبويب التي أدخلها المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!