ตัวอย่างในบทความนี้แบ่งปันผลกระทบของการสลับแท็บแท็บ JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> แท็บ </title> <style> *{margin: 0; Padding: 0; รายการสไตล์: ไม่มี;} .box {width: 1000px; ล้น: ซ่อน; มาร์จิ้น: 100px auto 0px; } #title {line-height: 40px; พื้นหลังสี: RGB (247,247,247); ขนาดตัวอักษร: 16px; Font-Weight: ตัวหนา; สี: RGB (102,102,102); ล้น: ซ่อน; } #title Span {float: ซ้าย; ความกว้าง: 166px; TEXT-ALIGN: CENTER; } #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; ลอย: ซ้าย; TEXT-ALIGN: CENTER; } #content li div a {font-size: 14px; สี: สีดำ; ความสูงของสาย: 14px; /* ลอย: ซ้าย;*/ แสดง: inline-block; ระยะขอบด้านบน: 10px; } #content li a: hover {color: #b70606; } #Content Li Div Span {FONT-SIZE: 16PX; ความสูงของสาย: 16px; /*ลอย: ซ้าย;*/ แสดง: บล็อก; สี: RGB (102,102,102); ระยะขอบด้านบน: 10px; } #content img {float: ซ้าย; ความกว้าง: 155px; ความสูง: 250px; } #title .Select {พื้นหลังสี: RGB (10,167,112); สี: สีขาว; } #Content. Show {display: block; } </style> </head> <body> <div> <p id = "title"> <span> หล่อ </span> <span> ความงาม </span> <span> สัตว์เลี้ยง </span> <pan> ภาพยนตร์ </span> <pan> League of Legends </span> <pan> เพลง </span> </p> href = "#"> jason statham </a> <span> หายากและเย็น </span> </div> <div> <img src = "ภาพ/shuaige2.jpg"> <a href = "#"> Jason statham </a> <pan> หายาก href = "#"> Tom Cruise </a> <span> ระดับสูง, บรรยากาศและระดับสูง </span> </div> <div> <img src = "ภาพ/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> src = "images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span> ระดับสูง, บรรยากาศและระดับสูง </span> </div> <div> <img src = "ภาพ/shuaige4.jpg" High-end </span> </div> <div> <img src = "images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <pan> High-end, บรรยากาศและ end </span> การล่องเรือ </a> <span> ระดับไฮเอนด์, บรรยากาศและระดับสูง </span> </div> <div> <img src = "ภาพ/shuaige5.jpg"> <a href = "#"> juan fu </a> <pan> href = "#"> juan fu </a> <span> ความหรูหราต่ำคีย์มีความหมายแฝง </span> </div> </li> <li> <li> <div> <img src = "ภาพ/meinv1.jpg"> <a href = "#"> ความงาม </a> <pan> src = "images/meinv2.jpg"> <a href = "#"> ความงาม </a> <span> ข้างนอกและนุ่มนวลภายใน </span> </div> <div> <img src = "ภาพ/meinv3.jpg"> <a href = "#"> ความงาม </a> src = "images/meinv4.jpg"> <a href = "#"> ความงาม </a> <pan> กรรไกรที่น่ารักน่ารัก </span> </div> <div> <img src = "ภาพ/meinv5.jpg"> <a href = "#"> ความงาม </a> src = "images/meinv6.jpg"> <a href = "#"> ความงาม </a> <span> แฟชั่นสดใสสด </span> </div> </li> <li> <div> <img src = "images/chongwu1.jpg"> <a href = "#" <div> <img src = "images/chongwu2.jpeg"> <a href = "#"> สัตว์เลี้ยง </a> <span> 666 หยวนต่อ </span> </div> <div> <img src = "images/chongwu3.jpg"> <a href = "#"> <div> <img src = "images/chongwu4.jpg"> <a href = "#"> สัตว์เลี้ยง </a> <pan> 666 หยวนต่อ </span> </div> <div> <img src = "ภาพ/chongwu5.jpg"> <a href = "#"> <div> <img src = "images/chongwu6.jpg"> <a href = "#"> สัตว์เลี้ยง </a> <span> 666 ชิ้นต่อ </span> </div> </li> <li> <div> <img src = "potals/href ="# คลาสสิก </span> </div> <div> <img src = "images/yingshi2.jpg"> <a href = "#"> คลาสสิกในคลาสสิก </span> </div> <div> <img src = "images/yingshi2.jpg"> <a href = "#" ยุบ </span> </div> <div> <img src = "images/yingshi3.jpg"> <a href = "#"> ซีรีส์ Transformers </a> <pan> น่าตื่นเต้นและน่าตื่นเต้น </span> </div> <div> ในความฝันนั้นสดใหม่ </span> </div> <div> <img src = "images/yingshi5.jpeg"> <a href = "#"> tongchi </a> <span> chinchilla ของฉัน </span> </div> <div> Gump ยังคงเหมือนเดิม Forrest Gump </a> </div> </li> <li> <div> <img src = "images/lol1.jpg"> <a href = "#"> Ice Sagittarius </a> <pan> ภรรยา </pan> ความมืด </a> </div> <div> <img src = "images/lol3.jpg"> <a href = "#"> explorer </a> <span> ฉันหล่อที่สุดในเกม </span> </div> <div> <img src = "ภาพ/lol4.jpg" ทุกรอบ </a> </div> <div> <img src = "images/lol5.jpg"> <a href = "#"> ตุรกีล้าน </a> <pan> ผู้เสียชีวิตล้านล้านครั้งต่อวัน - </span> </div> <div> <img src = "images/lol6.jpg"> <a href = "#"> wewolves </a> <pan> อย่าขยายให้ฉัน </span> </div> </li> <li> เพื่อพัฒนา - - </li></ul> </div> <script> title title = document.getElementById ('title'); var content = document.getElementById ('เนื้อหา'); var Spans = title.getElementsByTagname ('span'); var lis = content.getElementsByTagname ('li'); สำหรับ (var i = 0; i <spans.length; i ++) {Spans [i] .index = i; Spans [i] .onclick = function () {สำหรับ (var j = 0; j <spans.length; j ++) {Spans [j] .classname = ''; lis [j] .className = ''; } this.className = 'เลือก'; lis [this.index] .className = 'show'; }} </script> </body> </html>กุญแจสำคัญในรหัสนี้คือสองสุดท้ายสำหรับการสำรวจและตัวชี้นี้ สิ่งแรกสำหรับ Traversal คือการเพิ่มเหตุการณ์คลิกสำหรับแต่ละปุ่ม Span ในขณะที่ปุ่มที่สองสำหรับ Traversal คือการพิจารณาว่าปุ่มใดถูกคลิก ส่วนเนื้อหาที่เกี่ยวข้องนั้นง่ายต่อการควบคุมลักษณะที่ปรากฏและซ่อนอยู่
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น