部分代码如下:
<STYLE type=text/css>.sec1 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee } .sec2 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8 } .main_tab { BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8 } </STYLE> <!--JavaScript部分--> <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> <p align="center"> <!--HTML部分--> <TABLE id=secTable cellSpacing=0 cellPadding=0 width=492 border=0> <TBODY> <TR align=middle 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 class=main_tab id=mainTable height=200 cellSpacing=0 cellPadding=0 width=492 border=0><!--关于TBODY标记--> <TBODY style="DISPLAY: block"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="http://www.7ibu.com/favicon.ico"><BR> 启步网(7ibu.com)网络、IT(挨踢)职业游民学习娱乐之家.<BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="http://www.google.com/favicon.ico"><BR> google.com</TD> </TR></TBODY></TABLE></TD></TR></TBODY><!--关于tBodies集合--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="http://www.Msn.com/favicon.ico"><BR> Msn.com <center> <BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于display属性--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="http://www.Blueidea.com/favicon.ico"><br> Blueidea.com.</TD> </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></p> 运行代码复制代码另存代码收藏本页
实现效果如下: