<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"> <div id=
"tabDiv"> <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> <a class=
"tabs" id=
"test1" href=
"javascript:showTab('test1','tabContent3')">测试
</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 id=
"tabContent3" style=
"display:none"> <p> 已是黄昏独自愁，更著风和雨
<br /> 驿外断桥边，寂寞开无主。
<br /> 无意苦争春，一任群芳妒。
<br /> 零落成泥碾作尘，只有香如故。
<br /> </p> </div> </div> </form> </body> </html>
