บทความนี้แชร์รหัสการใช้งานสำหรับการสลับเอฟเฟกต์ที่แตกต่างกันของแท็บแท็บ JavaScript สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
รหัสเฉพาะ:
<html> <head> <title> แท็กที่มีสีต่างกัน </title> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <style type = "text/css"> * {margin: 0; Padding: 0; } body {font: 12px/20px 'Microsoft Yahei', 'Arial'; คำพูด: break-all; Word-wrap: break-word; } .ClearFix: หลังจาก {เนื้อหา: '.'; แสดง: บล็อก; ชัดเจน: ทั้งสอง; ความสูง: 0; ทัศนวิสัย: ซ่อน; } .ClearFix {Display: Inline-Block; } * html .clearfix {ความสูง: 1%; } .clearfix {display: block; } #wrap {Width: 320px; มาร์จิ้น: 2EM Auto; } .card_list {ความสูง: 30px; ขอบด้านล่าง: 1px Solid #F00; ตำแหน่ง: ญาติ; } .card_list li {float: ซ้าย; ความกว้าง: 68px; TEXT-ALIGN: CENTER; ความสูง: 30px; ระดับความสูง: 30px; มาร์จิ้น: 0 5px; แสดง: อินไลน์; ชายแดนด้านซ้าย-ซ้าย-ราดอุดิ: 6px; แนวชายแดนขวา-ขวา: 6px; } .card_list li.current {ความสูง: 34px; ความสูงของสาย: 34px; ระยะขอบด้านบน: -4px; ชายแดน: 1px Solid #F00; ความเป็นมา: #FF9494; ขอบด้านล่าง: ไม่มี; สี: #FFF; } #oli li: nth-child (1) {พื้นหลัง: #ff9494; } #oli li: nth-child (2) {พื้นหลัง: #8cfe8c; } #oli li: nth-child (3) {พื้นหลัง: #6969fb; } #oli li: nth-child (4) {พื้นหลัง: #ffe26f; } .card_content div {display: none; ความสูง: 100px; TEXT-ALIGN: CENTER; สี: #000; } .CARD_CONTENT DIV: เด็กคนแรก {พื้นหลัง: #FFF; } </style> <script type = "text/javascript"> window.onload = function () {var colorarr = {0: "#f00", 1: "#0f0", 2: "#00f", 3: "#fc0"}; var bgcolorarr = {0: "#ffff", 1: "#fff", 2: "#fff", 3: "#fff",} var ol = document.getElementById ("oli"); var oli = ol.getElementsByTagname ("li"); var oul = document.getElementById ("OUL"). getElementsByTagname ("div"); สำหรับ (var i = 0; i <oli.length; i ++) {oli [i] .index = i; oli [i] .onclick = function () {สำหรับ (var j = 0; j <oli.length; j ++) {oli [j] .classname = ""; oli [j] .style.border = "ไม่มี"; } this.className = "ปัจจุบัน"; this.style.border = "1px solid" + colorarr [this.index]; this.style.borderbottom = "ไม่มี"; ol.style.borderBottom = "1px solid" + colorarr [this.index]; สำหรับ (var j = 0; j <oul.length; j ++) {oul [j] .style.display = "ไม่มี"; oul [this.index] .style.display = "block"; oul [j] .style.backgroundColor = bgcolorarr [this.index]; - - </script> </head> <body> <div id = "wrap"> <ul id = "oli"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> </div> <div> 333333333333333333 </div> <div> 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน