Los ejemplos en este artículo comparten el código de implementación específico del efecto JS TAB para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
Código de implementación:
<html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> titeled document </title> <style type = "text/css"> cuerpo {font-size: 12px;} .seC, .sec1 {cursor: Pointer;}.}. Font-Weight: Bold; Text-Align: Center; Color de fondo:#990000;} .sec1 {color:#990000; Text-Align: Center; Color de fondo: #fffff;} div {line-highting: 22px;} </style> <script language = "javaScript"> function $ (id) {return document.getElementById (id); } función xxk (num, id, ii, iii) {// alerta (ii); var dq; for (var i = 1; i <= num; i ++) {if (i == id) {dq = $ (ii+i) .classname = 'sec'; // opción actual $ (iii+i) .style.display = "bloque"; } else {dq = $ (ii+i) .classname = 'sec1'; $ (iii+i) .style.display = "ninguno"; }}}} </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 <td bgcolor = "#ffffff" id = "t4" onMouseOver = "xxk (5,4, 't', 'tt')"> tab 4 </td> <td bgcolor = "#ffffff" id = "t5" onMouseOver = "xxk (5,5, 't', 'tt')"> tab 5 <////TR TROT colspan = "5" bgcolor = "#ffffff"> <div id = "tt1"> Tab Siring en enero </div> <div id = "tt2" style = "Display: Ninguna;"> Las pestañas están funcionando en febrero </div> <Div Id = "tt3" Style = "Display: Ninguna;"> Las pestañas están en funcionamiento en marzo </div> style="display:none;">Tabs are at work in April</div> <div id="tt5" style="display:none;">Tabs are at work in May</div> </td> </tr> </table> <br /> <table cellpadding="4" cellpacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> <tr> <td 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 = "#ffff" "Id =" ts '")" Tab 2 </td> <td bgcolor = "#ffff" "" TS3 "" "" 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 colsspan = "4" bgcolor = "#"#ffffffffffffffffffff <div id = "TTS1"> La pestaña está funcionando en enero </div> <div id = "tts2" style = "Display: Ninguno;"> La pestaña está funcionando en febrero </div> <div ID = "tts3" style = "Display: Ninguno;"> La pestaña está en funcionamiento en marzo </div> <Div Id = "TTS4" Style = "DISPLAY: NINGUNO;" </tr> </table> </body> </html>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.