Os exemplos deste artigo compartilham o código de implementação específico do efeito da guia JS para sua referência. O conteúdo específico é o seguinte
Imagem de reprodução:
Código de implementação:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> unt Documento intitulado </title> <style type = "text/css"> body {font-size: 12px;} .sec. Peso da fonte: negrito; Alinhamento de texto: centro; Background-Color:#990000;} .Sec1 {color:#990000; Alinhamento de texto: centro; Background-Color: #fffff;} div {altura de linha: 22px;} </style> <script linguage = "javascript"> function $ (id) {retorna document.getElementById (id); } função xxk (num, id, ii, iii) {// alert (ii); var dq; for (var i = 1; i <= num; i ++) {if (i == id) {dq = $ (ii+i) .className = 'sec'; // opção atual $ (iii+i) .style.display = "bloco"; } else {dq = $ (ii+i) .className = 'sec1'; $ (iii+i) .style.display = "nenhum"; }}}} </script> </ad Head> <body> <tabela CellPadding = "4" CellPacing = "1" BorderColor = "#ffffff" bgcolor = "#990000"> <td id = "t1" onmouseover = "xxk (5,1, 't', tat ') bgcolor = "#ffffff" id = "t2" onmouseover = "xxk (5,2, 't', 'tt')"> tab2 </td> <td bgcolor = "#fffff" id = "t3" onmouseover = "xxk (5,3, 't' tat 'tt') bgcolor = "#ffffff" id = "t4" onMouseOver = "xxk (5,4, 't', 'tt')"> tab 4 </td> <td bgcolor = "#ffff" id = "t5" onMouseover = "xxk (5,5, 't' 'tt' tt ') Colspan = "5" bgcolor = "#ffffff"> <div id = "tt1"> guia Servindo em janeiro </div> <div id id = "tt2" style = "display: nenhum;"> as guias estão em ação em fevereiro </dn> <div id = "tt3" style = "exibir: into;"> 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 = "#fffff" id = "ts2" onclick = "xxk (4,2, 'ts', 'ts') ONCLICK = "XXK (4,3, 'TS', 'TS')"> TAB 3 </td> <td bgcolor = "#fffff" id = "ts4" onclick = "xxk (4,4, 'ts', 'ts') <Div Id = "TTS1"> A guia está em ação em janeiro </div> <div id = "tts2" style = "display: none;"> guia está em ação em fevereiro </div> <div id = "tts3" style = "thishing: into;"> tabe "> está no trabalho em março </div> <div id =" tts4 "style ="> Display; </tabela> </body> </html>O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.