JavaScript实现的tab

最新推荐文章于 2020-08-21 23:42:37 发布

greatverve

最新推荐文章于 2020-08-21 23:42:37 发布

阅读量758

点赞数

分类专栏： JavaScript学习文章标签： javascript tabs server c 测试

本文链接：https://blog.csdn.net/greatverve/article/details/3245343

版权

JavaScript学习专栏收录该内容

42 篇文章 0 订阅

订阅专栏

 
 <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> 
<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> 
<!--tb控件结束--> 
</form> 
</body> 
</html> 
 

greatverve

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现的tab

html xmlns="http://www.w3.org/1999/xhtml" > head runat="server"> title>使用JavaScript实现的tabtitle> style type="text/css"> /*设置超链接样式*/ a { color: #5086a5; text-decoration
复制链接

扫一扫