- <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>
JavaScript实现的tab
最新推荐文章于 2020-08-21 23:42:37 发布