The examples in this article share the specific implementation code of the js tab effect for your reference. The specific content is as follows
Reproduction image:
Implementation code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Unt titled document</title> <style type="text/css"> body{ font-size:12px;} .sec,.sec1{ cursor:pointer;} .sec{ color:#FFFFF; font-weight:bold; text-align:center; background-color:#990000;} .sec1{ color:#990000; text-align:center; background-color:#FFFFF;} div{ line-height:22px;} </style> <script language="javascript"> function $(id){ return document.getElementById(id); } function xxk(num,id,ii,iii) { //alert(ii); var dq; for(var i=1;i<=num;i++) { if(i==id){ dq=$(ii+i).className='sec'; //Current 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,'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</td> </tr> <tt> <td colspan="5" bgcolor="#FFFFFF"> <div id="tt1">Tab Serving in January</div> <div id="tt2" style="display:none;">Tabs are at work in February</div> <div id="tt3" style="display:none;">Tabs are at work in March</div> <div id="tt4" 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="#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">Tab is at work in January</div> <div id="tts2" style="display:none;">Tab is at work in February</div> <div id="tts3" style="display:none;">Tab is at work in March</div> <div id="tts4" style="display:none;">Tab is at work in April</div> </td> </tr> </table> </body> </html>The above is all about this article, I hope it will be helpful to everyone's learning.