| 订阅 | 在线投稿
分享
 
 
 

JavaScript+CSS实现tab

来源:互联网网民  宽屏版  评论
2008-08-15 05:13:22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>

 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" > <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>
󰈣󰈤
 
 
 
>>返回首页<<
 
 热帖排行
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
©2005- 王朝网络 版权所有