تشترك الأمثلة الواردة في هذه المقالة في تأثير تبديل علامة تبويب JS للرجوع إليه. المحتوى المحدد كما يلي
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> علامة التبويب </title> <style> *{margin: 0 ؛ الحشو: 0 ؛ قائمة القائمة: none ؛} .box {width: 1000px ؛ الفائض: مخفي. الهامش: 100px Auto 0px ؛ } #title {line-height: 40px ؛ خلفية اللون: RGB (247،247،247) ؛ حجم الخط: 16 بكسل ؛ خط الرصيف: جريئة ؛ اللون: RGB (102،102،102) ؛ الفائض: مخفي. } #title span {float: left ؛ العرض: 166px ؛ محاذاة النص: المركز ؛ } #title span: hover { /*color: black ؛* / cursor: pointer ؛ } #content {margin-top: 20px ؛ } #content li {width: 1050px ؛ الفائض: مخفي. العرض: لا شيء ؛ خلفية اللون: RGB (247،247،247) ؛ } #content li div {width: 156px ؛ الهامش اليمين: 14px ؛ تعويم: اليسار. محاذاة النص: المركز ؛ } #content li div a {font-size: 14px ؛ اللون: أسود. Line-Leight: 14px ؛ /* تعويم: اليسار ؛*/ العرض: كتلة مضمنة ؛ الهامش: 10 بكسل ؛ } #content li a: hover {color: #b70606 ؛ } #content li div span {font-size: 16px ؛ ارتفاع الخط: 16 بكسل ؛ /*تعويم: اليسار ؛*/ العرض: كتلة ؛ اللون: RGB (102،102،102) ؛ الهامش: 10 بكسل ؛ } #content img {float: left ؛ العرض: 155 بكسل ؛ الارتفاع: 250 بكسل ؛ } #title .select {background-color: rgb (10،167،112) ؛ اللون: أبيض. } #content .show {display: block ؛ } </style> </head> <body> <viv> <p id = "title"> <span> وسيم </span> <span> الجمال </span> <span> pet </span> <span> فيلم </span> <span> League of Legends </span> <span> music </p> </p> href = "#"> jason statham </a> <span> نادرة وباردة </span> </viv> <viv> <img src = "images/shuaige2.jpg"> <a href = "#"> jason statham </a> HREF = "#"> Tom Cruise </a> <span> المتطورة والغلاف الجوي والراقية </span> </viv> <viv> <img src = "images/shuaige4.jpg"> <a href = "#" src = "Images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span> المتطورة ، الجوي والراقية </span> </viv> <viv> <img src = "الصور/shuaige4.jpg"> متطور </span> </viv> <viv> <img src = "الصور/shuaige4.jpg"> <a href = "#" رحلة بحرية </a> <span> المتطورة والغلاف الجوي والراقية </span> </viv> <viv> <img src = "الصور/shuaige5.jpg"> <a href = "#" href = "#"> Juan Fu </a> <span> الفخامة المنخفضة لها دلالة </span> </viv> </li> <li> <iv> <iv> <img src = "images/meinv1.jpg"> <a href = "#" src = "images/meinv2.jpg"> <a href = "#"> الجمال </a> <span> غاضب خارج وناعمة من الداخل </span> </viv> <viv> <img src = "images/meinv3.jpg"> <a href = "#" src = "images/meinv4.jpg"> <a href = "#"> الجمال </a> <span> مقصات pouting لطيفة </span> </viv> <viv> <img src = "الصور/meinv5.jpg"> <a href = "#" src = "images/meinv6.jpg"> <a href = "#"> الجمال </a> <span> عصري ، مشرق ، جديد </span> </viv> </li> <li> <viv> <img src = "الصور/chongw1.jpg"> <a href = "#" <viv> <img src = "images/chongwu2.jpeg"> <a href = "#"> pets </a> <span> 666 yuan per </span> </viv> <viv> <img src = "images/chongwu3.jpg"> <a href = "#" <viv> <img src = "images/chongwu4 src = "images/chongwu6.jpg"> <a href = "#"> الحيوانات الأليفة </a> <span> 666 قطعة لكل </span> </viv> </li> <li> <div> <img src = "الصور/yingshi1.jpg"> <viv> <img src = "images/yingshi2.jpg"> <a href = "#"> الكلاسيكيات في الكلاسيكيات </span> </viv> <viv> <img src = "الصور/yingshi2.jpg"> <a href = "#" src = "images/yingshi3.jpg"> <a href = "#"> series transformers </a> <span> مثيرة ومثيرة </span> </viv> <viv> <img src = "الصور/yingshi4 <viv> <img src = "images/yingshi5.jpeg"> <a href = "#"> tongchi </a> <span> my chinchilla </span> </viv> <viv> <img src = "الصور/yingshi6.jpg"> <a href = "#" Gump </a> </viv> </li> <li> <iv> <img src = "images/lol1.jpg"> <a href = "#" src = "Images/lol3.jpg"> <a href = "#"> explorer </a> <span> أنا الأكثر وسيمًا في اللعبة </span> </viv> <viv> <img src = "images/lol4.jpg"> <a href = "#" SRC = "Images/lol5.jpg"> <a href = "#"> التركية مليون </a> <span> الموت مليون مليون مرة في اليوم. . </span> </viv> <viv> <img src = "Images/lol6.jpg"> <a href = "#"> wewolves </a> <span> لا تنسجم بالنسبة لي </span> </viv> </li> <li> ليتم تطويرها. . . </li> </ul> </viv> <script> var title = document.getElementById ('title') ؛ var content = document.getElementById ('content') ؛ var يمتد = title.getElementsByTagName ('span') ؛ var lis = content.getElementSbyTagname ('li') ؛ لـ (var i = 0 ؛ i <Spans.length ؛ i ++) {يمتد [i] .index = i ؛ يمتد [i] .onclick = function () {for (var j = 0 ؛ j <Spans.length ؛ j ++) {يمتد [j] .className = '' ؛ lis [j] .className = '' ؛ } this.className = 'select' ؛ lis [this.index] .className = 'show' ؛ }} </script> </body> </html>مفتاح هذا الرمز هو آخر اثنين للتمريرات وهذا المؤشر. الأول لـ Traversal هو إضافة حدث نقرة لكل زر Span ، في حين أن الثانية من أجل Traversal هي تحديد الزر الذي يتم النقر عليه حاليًا. من السهل التحكم في جزء المحتوى المقابل للمظهر ومخفيه ؛
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.