Die Beispiele in diesem Artikel teilen den spezifischen Implementierungscode des Registerkarteffekts JS für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Reproduktionsbild:
Implementierungscode:
<html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = gb2312"/> <title> bis betitelte Dokument </title> <style type = "text/css"> body {font-size: 12px;}. Schriftgewicht: fett; Text-Align: Mitte; Hintergrundfarbe:#990000;} .sec1 {Farbe:#990000; Text-Align: Mitte; Hintergrundfarbe: #fffff;} div {Zeilenhöhe: 22px;} </style> <script Language = "javaScript"> Funktion $ (id) {return document.getElementById (id); } Funktion xxk (num, id, ii, iii) {// alarm (ii); var dq; für (var i = 1; i <= num; i ++) {if (i == id) {dq = $ (ii+i) .className = 'sec'; // aktuelle Option $ (iii+i) .style.display = "block"; } else {dq = $ (ii+i) .className = 'sec1'; $ (iii+i) .style.display = "none"; }}}} </script> </head> <body> <table CellPadding = "4" cellpacing = "1" borderColor = "#ffffff" bgcolor = "#990000"> <td id = "t1" onmouseover = "xxk (5,1, 'tt bgcolor="#FFFFFF" id="t2" onmouseover="xxk(5,2,'t','tt')">Tab2</td> <td bgcolor="#FFFFF" id="t3" onmouseover="xxk(5,3,'t','tt')">Tab 3</td> <td bgcolor = "#ffffff" id = "t4" onmouseover = "xxk (5,4, 't', 'tt')"> tab 4 </td> <td bgcolor = "#ffffff" id = "t5" onMouseover = "xxk (5,5, 'tt', 'tt')") "). colspan = "5" bgcolor = "#ffffff"> <div id = "tt1"> Registerkarte im Januar. style = "display: keine;"> Registerkarten arbeiten im April </div> <div id = "tt5" style = "display: Keine;"> Die Registerkarten werden im Mai funktioniert. id="ts1" onclick="xxk(4,1,'ts','tts')">Tab 1</td> <td bgcolor="#FFFFFF" id="ts2" onclick="xxk(4,2,'ts','ts')">Tab 2</td> <td bgcolor="#FFFFFF" id="ts3" onclick="xxk(4,3,'ts','ts')">Tab 3</td> <td bgcolor="#FFFFFF" id="ts4" onclick="xxk(4,4,'ts','ts')">Tab 4</td> </tr> <tr> <td colspan="4" bgcolor="#FFFFFF"> <div id = "tts1"> Die Registerkarte ist im Januar im Januar funktioniert </div> <div id = "tts2" style = "display: Keine;"> Die Registerkarte "Die Registerkarte" im Februar ist im Februar funktioniert. </tr> </table> </body> </html>Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.