从myie网站抠的选项卡效果

运行代码

<style> .navbar-text { BORDER-RIGHT: #999999 1px; BORDER-TOP: #999999 1px; PADDING-LEFT: 10px; FONT-SIZE: 26px; BACKGROUND-IMAGE: url(../images/title_bg_left.gif); BORDER-LEFT: #999999 1px; COLOR: #ffffff; BORDER-BOTTOM: #999999 1px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: "黑体" } BODY,TD { FONT-SIZE: 12px; } .tab-on { BORDER-RIGHT: #cccccc 1px; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 120px; CURSOR: pointer; COLOR: #000000; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px; BACKGROUND-COLOR: #ffffff } .tab-off { BORDER-RIGHT: #cccccc 1px; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 120px; CURSOR: pointer; COLOR: #666666; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #f6f6f6 } .tab-none { BORDER-RIGHT: #cccccc 1px; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px solid } .tab-content { BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; VERTICAL-ALIGN: top; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #ffffff } .hide-table { DISPLAY: none } .show-table { DISPLAY: block } </style> <script language="javascript"> <!-- //Change Cell Content - By SiC/CYAN function switchCell(n, hash) { nc=document.getElementsByName("navcell"); if(nc){ t=document.getElementsByName("tb") for(i=0;i<nc.length;i++){ nc.item(i).className="tab-off"; t.item(i).className="hide-table"; } nc.item(n-1).className="tab-on"; t.item(n-1).className="tab-content show-table"; }else if(navcell){ for(i=0;i<navcell.length;i++){ navcell[i].className="tab-off"; tb[i].className="hide-table"; } navcell[n-1].className="tab-on"; tb[n-1].className="tab-content show-table"; } if(hash){ document.location="#"+hash; } } // --> </script> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=tab-on id=navcell onclick=switchCell(1) name="navcell"><IMG height=16 src="images/navbar_intro.gif" width=16 align=absMiddle> 简介 </TD> <TD class=tab-off id=navcell onclick=switchCell(2) name="navcell"><IMG height=16 src="images/navbar_update.gif" width=16 align=absMiddle> 最近更新</TD> <TD class=tab-off id=navcell onclick=switchCell(3) name="navcell"><IMG height=16 src="images/navbar_link.gif" width=16 align=absMiddle> 商务合作</TD> <TD class=tab-off id=navcell onclick=switchCell(4) name="navcell"><IMG height=16 src="images/navbar_awards.gif" width=16 align=absMiddle> 奖项 和 链接</TD> <TD class=tab-none>　</TD> </TR> </TBODY> </TABLE> <TABLE class=tab-content id=tb cellSpacing=5 cellPadding=0 width="100%" border=0 name="tb"> <TBODY> <TR> <TD class=td_heading vAlign=top>我们的冲浪之选</TD></TR> </TBODY> </TABLE> <TABLE class=hide-table id=tb cellSpacing=5 cellPadding=0 width="100%" border=0 name="tb"> <TBODY> <TR> <TD class=td_heading vAlign=top>站点最后更新:</TD></TR> </TBODY> </TABLE> <TABLE class=hide-table id=tb cellSpacing=5 cellPadding=0 width="100%" border=0 name="tb"> <TBODY> <TR> <TD class=td_heading vAlign=top>商务</TD></TR> </TBODY> </TABLE> <TABLE class=hide-table id=tb cellSpacing=5 cellPadding=0 width="100%" border=0 name="tb"> <TBODY> <TR> <TD class=td_heading vAlign=top>奖项和链接</TD></TR> </TBODY> </TABLE>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]