实现代码：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ font-size:12px;} .sec,.sec1{ cursor:pointer;} .sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;} .sec1{ color:#990000; text-align:center; background-color:#FFFFFF;} 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'; //当前选项 $(iii+i).style.display="block"; } else { dq=$(ii+i).className='sec1'; $(iii+i).style.display="none"; } } } </script> </head> <body> <table cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> <tr> <td>选项卡1</td> <td bgcolor="#FFFFFF">选项卡2</td> <td bgcolor="#FFFFFF">选项卡3</td> <td bgcolor="#FFFFFF">选项卡4</td> <td bgcolor="#FFFFFF">选项卡5</td> </tr> <tr> <td colspan="5" bgcolor="#FFFFFF"> <div>选项卡1月在上班</div> <div>选项卡2月在上班</div> <div>选项卡3月在上班</div> <div>选项卡4月在上班</div> <div>选项卡5月在上班</div> </td> </tr> </table> <br /> <table cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> <tr> <td>选项卡1</td> <td bgcolor="#FFFFFF">选项卡2</td> <td bgcolor="#FFFFFF">选项卡3</td> <td bgcolor="#FFFFFF">选项卡4</td> </tr> <tr> <td colspan="4" bgcolor="#FFFFFF"> <div>选项卡1月在上班</div> <div>选项卡2月在上班</div> <div>选项卡3月在上班</div> <div>选项卡4月在上班</div> </td> </tr> </table> </body> </html>