JavaScript+CSS实现tab
来源：岁月联盟
时间：2008-08-11
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>使用JavaScript实现的tab</title>
<style type="text/css">
/*设置超链接样式*/
a
{
color: #5086a5;
text-decoration: none;
font-size: 12px;
}
a:hover
{
color: #5086a5;
text-decoration: underline;
font-size: 12px;
}
a:visited
{
color: #5086a5;
font-size: 12px;
}
/*整个tab层居中，宽度为600px*/
#tabDiv
{
width:600px;
margin:1em auto;
padding-bottom: 10px;
border-right: #b2c9d3 1px solid;
border-top: #b2c9d3 1px solid;
border-left: #b2c9d3 1px solid;
border-bottom: #b2c9d3 1px solid;
background: #ffffff;
}
/*tab头的样式*/
#tabsHead
{
padding-left: 0px;
height: 26px;
background-color: #e8f7fc;
font-size: 1em;
margin: 1px 0px 0px;
color: #5086a5;
line-height: 26px;
}
/*已选tab头（超链接）的样式*/
.curtab
{
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
border-right: #b2c9d3 1px solid;
font-weight: bold;
float: left;
cursor: pointer;
background: #ffffff;
}
/*未选tab头（超链接）的样式*/
.tabs
{
border-right: #c1d8e0 1px solid;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
font-weight: normal;
float: left;
cursor: pointer;
}
p
{
font-size:9pt;
margin-left:20pt;
}
</style>
<script language="javascript" type="text/jscript">
<!--
//显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID）
function showTab(tabHeadId,tabContentId)
{
//tab层
var tabDiv = document.getElementById("tabDiv");
//将tab层中所有的内容层设为不可见
//遍历tab层下的所有子节点
var taContents = tabDiv.childNodes;
for(i=0; i<taContents.length; i++)
{
//将所有内容层都设为不可见
if(taContents[i].id!=null && taContents[i].id != 'tabsHead')
{
taContents[i].style.display = 'none';
}
}
//将要显示的层设为可见
document.getElementById(tabContentId).style.display = 'block';
//遍历tab头中所有的超链接
var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');
for(i=0; i<tabHeads.length; i++)
{
//将超链接的样式设为未选的tab头样式
tabHeads[i].className='tabs';
}
//将当前超链接的样式设为已选tab头样式
document.getElementById(tabHeadId).className='curtab';
document.getElementById(tabHeadId).blur();
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<!--tab控件-->
<div id="tabDiv">
<!--tab头-->
<div id="tabsHead">
<a class="curtab" id="tabs1" href="javascript:showTab('tabs1','tabContent1')">钗头凤</a>
<a class="tabs" id="tabs2" href="javascript:showTab('tabs2','tabContent2')">卜算子·咏梅</a>
</div>
<div id="tabContent1" style="display:block">
<p>
红稣手，黄藤酒，<br />
满城春色宫墙柳。<br />
东风恶，欢情薄。<br />
一杯愁绪，几年离索。<br />
错、错、错。<br /><br />
春如旧，人空瘦，<br />
泪痕红浥鲛绡透。<br />
桃花落，闲池阁，<br />
山盟虽在，锦书难托。<br />
莫、莫、莫。<br />
</p>
</div>
<div id="tabContent2" style="display:none">
<p>
驿外断桥边，寂寞开无主。<br />
已是黄昏独自愁，更著风和雨。<br />
无意苦争春，一任群芳妒。<br />
零落成泥碾作尘，只有香如故。<br />
</p>
</div>
</div>
<!--tb控件结束-->
</form>
</body>
</html>
