Les exemples de cet article partagent le code d'implémentation spécifique de l'effet onglet JS pour votre référence. Le contenu spécifique est le suivant
Image de reproduction:
Code d'implémentation:
<Html> <A-head> <meta http-equiv = "contenu-type" contenu = "text / html; charset = gb2312" /> <itle> intitulé Document </Title> <style type = "text / css"> body {Font-Size: 12px;} .sec, .sec1 {cursor: pointer;} .Sec {coloreff; Police-poids: Bold; Texte-aligne: Centre; Background-Color: # 990000;} .sec1 {Color: # 990000; Texte-aligne: Centre; Background-Color: #fffff;} div {line-height: 22px;} </ style> <script linguisse = "javascript"> function $ (id) {return document.getElementById (id); } fonction xxk (num, id, ii, iii) {// alert (ii); var dq; pour (var i = 1; i <= num; i ++) {if (i == id) {dq = $ (ii + i) .classname = 'sec'; // Option actuelle $ (iii + i) .style.display = "block"; } else {dq = $ (ii + i) .classname = 'sec1'; $ (iii + i) .style.display = "Aucun"; }}}} </ script> </ head> <body> <table cellpadding = "4" cellpacing = "1" borderColor = "# ffffff" bgcolor = "# 990000"> <td id = "t1" onMouseOver = "xxk (5,1, 't', 'tt')"> tab1 </ td> <td 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> bgcolor = "# ffffff" id = "t4" onMouseover = "xxk (5,4, 't', 'tt')"> onglet 4 </td> <td bgcolor = "# ffffff" id = "t5" onMouseover = "xxk (5,5, 'tt', 'tt')"> tab 5 </ td> colspan = "5" bgcolor = "# ffffff"> <div id = "tt1"> tab enerant en janvier </v> <div id = "tt2" style = "display: non;"> Les onglets sont à l'œuvre en février </v> <div id = "tt3" style = "Display: Aucun;"> Les onglets sont à l'œuvre en mars </v> <v> <v id = "TT4" Style = "Affichage: Aucun;"> Les onglets sont à l'œuvre en avril </div> <div id = "tt5" style = "display: Aucun;"> Les onglets sont à l'œuvre en mai </v> </td> </tr> </s table> <br /> <Table CellPadding = "4" Cellpacing = "1" BorderColor = "# ffffff" bgcolor = "# 990000"> <TDD> <TD " id = "ts1" onclick = "xxk (4,1, 'ts', 'tts')"> onglet 1 </td> <td bgcolor = "# ffffff" id = "ts2" onclick = "xxk (4,2, 'ts', 'ts')"> tab 2 </td> <td bgcolor = "# ffff" id = "ts" td bgcolor = "# ffff" id = "ts" td bgcolor = "# ffff" id = "ts" td bgcolor = "# ffff" id = "ts" td bgcolor = "# ffff" id = "ts" td bgcolor = "# ffff" id = "ts" td bgcolor = "# ffff" id = "ts" td bgcolor = "# ffff" id = "ts" onclick = "xxk (4,3, 'ts', 'ts')"> onglet 3 </td> <td bgcolor = "# ffffff" id = "ts4" onclick = "xxk (4,4, 'ts', 'ts')"> tab 4 </td> </tr> <Tr> <td Colspan = "4" Bgcolor = "Fffff" Ffff <div id = "TTS1"> L'onglet est à l'œuvre en janvier </div> <div id = "TTS2" style = "affiche: aucun;"> L'onglet est à l'œuvre en février </v> <div id = "tts3" style = "Affichage: Aucune;" Tab est à l'œuvre en mars </div> <div id = "TTS4" style = "Affichage: non;> Tab est à l'œuvre dans April </ Div> </ body> </html>Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.