ตัวอย่างในบทความนี้แบ่งปันรหัสการใช้งานเฉพาะสำหรับคุณสำหรับเอฟเฟกต์การสลับแท็บ JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html> <head> <meta charset = "gb2312"/> <title> zhu zhu ทำ </title> <script src = "js/jquery.js" type = "ข้อความ/javascript"> </script> Padding: 0; } ร่างกาย {พื้นหลังสี: #FFF; Font-Family: "Microsoft Yahei"; ขนาดตัวอักษร: 18px; ความกว้าง: 1000px; มาร์จิ้น: 50px auto; สี:#000000; } .wrapper {Width: 350px; } #NAV UL {ขอบด้านล่าง: 2px Solid YellowGreen; ความสูง: 32px; } #nav li {display: inline-block; ชายแดน: 2px Solid #999; ขอบด้านล่าง: ไม่มี; ขอบซ้าย: 10px; ความกว้าง: 65px; TEXT-ALIGN: CENTER; ระดับความสูง: 30px; } #nav li: โฮเวอร์ {เคอร์เซอร์: ตัวชี้; } #content {display: block; เส้นขอบ: 1px Solid Blue; ชายแดนด้านบน: ไม่มี; TEXT-ALIGN: CENTER; ความสูง: 100px; ความสูงของสาย: 100px; } #nav li.on {border-bottom: Solid 2px #FFFFFF; } .hide {display: none; }. show {display: block; } </style> </head> <script type = "text/javascript"> /*window.onload=change; // ฟังก์ชั่นการใช้งานรหัส JS เปลี่ยน () {this.nav = document.getElementById ("NAV"); this.li = nav.getElementsByTagname ("li"); this.cont = document.getElementById ("เนื้อหา"); this.divi = cont.getElementsByTagname ("div"); สำหรับ (var i = 0; i <li.length; i ++) {li [i] .index = i; li [i] .onclick = function () {สำหรับ (var i = 0; i <li.length; i ++) {li [i] .className = ""; divi [i] .className = "ซ่อน"; } li [this.index] .className = "on"; divi [this.index] .className = "show"; }}}*/$ (function () {$ ('#nav li') แต่ละ (ฟังก์ชั่น () {$ (นี่). click (ฟังก์ชัน () {$ ('#nav li'). RemoveClass ("on"); $ (this) .addclass ("on"); $ ("#content div") div "). eq ($ (this) .index ()). addclass (" แสดง "). siblings (). addclass (" ซ่อน ");})})}) </script> <body> <div> <div id =" nav "> <ul> <li> num1 </li> <li> id = "เนื้อหา"> <div> content1 </div> <div> content2 </div> <div> เนื้อหา 3 </div> <div> เนื้อหา 4 </div> </div> </div> </div> </body> </html>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน