WEB开发网
开发学院网页设计JavaScript JavaScript+CSS实现tab 阅读

JavaScript+CSS实现tab

 2008-08-11 19:57:43 来源:WEB开发网   
核心提示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmln

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

Tags:JavaScript CSS 实现

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接