网页Tab选项卡实现

<style type="text/css"> font-size: 12px; color: #000000; line-height: 150%; } .sec1 { background-color: #EEEEEE; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF } .sec2 { background-color: #D4D0C8; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; } .main_tab { background-color: #D4D0C8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; }</style><script language=javascript> function secBoard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2"; for(i=0;i<mainTable.tBodies.length;i++) mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block"; } </script> <table id="secTable" cellspacing="0" cellpadding="0" width="549" border="0"> <tbody> <tr align="center" height="20"> <td class="sec2" onclick="secBoard(0)" width="10%">选项卡1</td> <td class="sec1" onclick="secBoard(1)" width="10%">选项卡2</td> <td class="sec1" onclick="secBoard(2)" width="10%">选项卡3</td> <td class="sec1" onclick="secBoard(3)" width="10%">选项卡4</td> </tr> </tbody> </table> <table id="mainTable" height="240" cellspacing="0" cellpadding="0" width="549" border="0" class="main_tab"> <tbody style="DISPLAY: block"> <tr> <td valign="top" align="center"><br /><br />选项卡1 </td> </tr> </tbody> <tbody style="DISPLAY: none"> <tr> <td valign="top" align="center"><br /><br />选项卡2 </td> </tr> </tbody> <tbody style="DISPLAY: none"> <tr> <td valign="top" align="center"><br /><br />选项卡3 </td> </tr> </tbody> <tbody style="DISPLAY: none"> <tr> <td valign="top" align="center"><br /><br />选项卡4 </td> </tr> </tbody> </table>