css+div选项卡效果
<html>
<head>
<title> Tab Option </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<SCRIPT LANGUAGE="JavaScript">
<!--
function Tab(n)
{
for (i=1;i<=2;i++)
{
document.getElementById("s"+i).className="tab-2";
document.getElementById("tab"+i).style.display='none';
}
document.getElementById("s"+n).className="tab-1";
document.getElementById("tab"+n).style.display='';
}
//-->
</SCRIPT>
<style>
.tab-1 {color:black;height:30px;text-align:center;border:1px solid #70A1CA;border-bottom: 1px solid white;background: #F4F9FE; }
.tab-2 {color:black;height:30px;text-align:center;border:1px solid #70A1CA;border-bottom: 1px solid #70A1CA;background: white;}
td {text-align:center;background:#f4f4f4;}
</style>
</head>
<body>
<TABLE cellpadding="0" cellspacing="0" width="50%">
<TR>
<TD id="s1" class="tab-1" onclick=Tab(1)>Tab1</TD>
<TD id="s2" class="tab-2" onclick=Tab(2)>Tab2</TD>
</TR>
</TABLE>
<BR>
<TABLE border="0" cellpadding="0" cellspacing="0" width="50%" id="tab1" style="display:'';" height="50">
<TR>
<TD>Tab1 content</TD>
</TR>
</TABLE>
<TABLE border="0" cellpadding="0" cellspacing="0" width="50%" id="tab2" style="display:none;" height="50">
<TR>
<TD>Tab2 content</TD>
</TR>
</TABLE>
</body>
</html>
无背景图片，纯CSS+DIV 选项卡效果 (2008-6-25 17:8:39)
雅虎中国右侧栏的选项卡效果怎样用table实现 (2008-6-25 17:7:58)
【Javascript】选项卡效果 (2008-6-25 17:3:7)
选项卡效果（鼠标触发式） (2008-6-25 16:59:46)