Dieser Artikel teilt den Implementierungscode für die Umschaltung der Effekte verschiedener Farben von JavaScript -Registerkarten -Tags für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Spezifischer Code:
<html> <kopf> <titels> Tags verschiedener Farben </title> <meta http-äquiv = "content-type" content = "text/html; charset = gb2312"/> <style type = "text/csS"> * {Margin: 0; Polsterung: 0; } body {font: 12px/20px 'microsoft yahei', 'arial'; Wortausbruch: Break-All; WORT-WRAP: Breakwort; } .clearFix: After {Inhalt: '.'; Anzeige: Block; klar: beides; Höhe: 0; Sichtbarkeit: versteckt; } .clearFix {display: Inline-Block; } * html .clearFix {Höhe: 1%; } .clearFix {display: block; } #wrap {width: 320px; Rand: 2EM Auto; } .card_list {Höhe: 30px; Grenzboden: 1PX Solid #f00; Position: Relativ; } .card_list li {float: links; Breite: 68px; Text-Align: Mitte; Höhe: 30px; Zeilenhöhe: 30px; Rand: 0 5px; Anzeige: Inline; Border-Top-Links-Radius: 6PX; Grenz-Top-Right-Radius: 6PX; } .card_list li.current {Höhe: 34px; Zeilenhöhe: 34px; Rand: -4px; Grenze: 1PX Solid #f00; Hintergrund: #ff9494; Grenzboden: Keine; Farbe: #fff; } #oli li: nth-Kind (1) {Hintergrund: #ff9494; } #oli li: nth-Kind (2) {Hintergrund: #8cFe8c; } #oli li: nth-Kind (3) {Hintergrund: #6969FB; } #oli li: nth-Kind (4) {Hintergrund: #ffe26f; } .card_content div {display: keine; Höhe: 100px; Text-Align: Mitte; Farbe: #000; } .card_content div: First-Kind {Hintergrund: #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"); für (var i = 0; i <oli.length; i ++) {oli [i] .Index = i; oli [i] .onclick = function () {for (var j = 0; j <oli.length; j ++) {oli [j] .className = ""; oli [j] .style.border = "keine"; } this.className = "current"; this.style.border = "1px fest" + colorarr [this.index]; this.style.borderbottom = "keine"; ol.style.borderbottom = "1px solide" + colorarr [this.index]; für (var j = 0; j <Oul.Length; j ++) {OUl [j] .Style.display = "Keine"; 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> </ul> <div id="oUl"> <div style="display:block;"> 111111111111111111 </div> <div> 222222222222222 </div> <div> 3333333333333333 </div> <div> 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 </div> </div> </body> </html>Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.