شاركت هذه المقالة معك الرمز لتنفيذ تأثير تبديل علامة التبويب في JS الأصلي للرجوع إليه. المحتوى المحدد كما يلي
1. html جزء
<Body> <div id = "tab"> <viv> <ul> <li> <a href = "#"> الشؤون الحالية </a> </li> <li> <a href = "#" <viv> الترفيه </div> </viv> </body>
2.CSS الجزء: هناك العديد من الطرق لتنفيذ جزء النمط. هذا هو العرض التوضيحي البسيط الذي كتبته ، CSS أنا الأسوأ في. <...
.tab_menu. selected {background-color: #AAA ؛} .tab_menu ul {height: 30px ؛} .tab_menu ul li {float: left ؛ style list: none ؛ width: 50px ؛ height: 30px ؛ color:#000 ؛ الحدود: الصلبة 1px: solid 1px ؛ Gray ؛ Border-Bottom: none ؛ text-align: center ؛ line-line: 30px ؛ hargin-right: 3px ؛} .tab_menu ul li a {text-decoration: none ؛} .tab_box {width: none ؛3. جزء JS المهم:
window.onload = function () {var otab = document.getElementById ('tab') ؛ 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 () {for (var j = 0 ؛ j <ali.length ؛ j ++) {ali [j] .className = '' ؛ // cancel style style abox [j] .classname = 'hide' ؛ abox [this.index] .className = '' ؛ }}}هذا بسيط وخام ، ولا يعتبر ما إذا كان Tabmenu و Tabbox لهما أنماط متعددة ، ولا تكيف مع المشروع مجرد طريقة للتفكير. العديد من الأماكن تحتاج إلى تحسين. فيما يلي النظر في الموقف الذي يتم فيه تمييز فئات متعددة ، ولكن عمومًا هناك فئات متعددة. الآن نحتاج إلى استخدام المهارات لإزالة فئة معينة وإضافة الفصل.
3.1 إضافة وحذف فئة في JS الأصلي.
window.onload = function () {var otab = document.getElementById ('tab') ؛ 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 () {for (var j = 0 ؛ j <ali.length ؛ j ++) {var aclass = ali [j] .classname.split ('') z = 0 ؛ z <aclass.length ؛ z ++) {if (aclass [z] == 'select') {aclass.splice (z ، 1) ؛ // استخدم طريقة لصق الصفيف لحذف الفئة الموجودة}} لـ (var k = 0 ؛ k <aclass1.length ؛ k ++) ACLASS1.SPLICE (K ، 1) ؛ }} ad ali [j] .className = aclass.join ('') ؛ // جميع القوائم إزالة النمط المحدد abox [j] .className+= 'Hide' ؛ أسلوب} } } }الاختبارات الشخصية فعالة ، لكنها كلها فوضوية بعض الشيء في طريقة واحدة. علاوة على ذلك ، عندما يكون هناك العديد من الفئات ، فإن الكفاءة مشكلة أيضًا ، ولكن لا ينبغي أن يكون هناك العديد من الفئات == تحسينها في المستقبل. هذه الوظيفة بسيطة للغاية لاستخدام jQuery.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.