1. /*  
  2. author:liulanghe By 2008-10-16  
  3. website:http://www.yingbaidu.com  
  4. tags:Js Tab选项卡的实现  
  5. Example:var a=new autoTab("autoTab","current","mainli");  
  6. "autoTab" 为父Id current为选中时的样式 mainli 为未选中时样式  
  7. */ 
  8.  
  9. var autoTab = function(AutoTabId,currentClass,mainClass)  
  10. {  
  11.    var headLi=$(AutoTabId).childNodes[0].childNodes[0].childNodes;  
  12.    for(var i=0;i<headLi.length;i++)  
  13.    {  
  14.     var headliChild=headLi[i];  
  15.     if(window.addEventListener)  
  16.     {  
  17.      headLi[i].addEventListener("mouseover",function(){SetCurrentTab()},false);  
  18.     }  
  19.     else 
  20.     {  
  21.      //alert(headLi[i].childNodes[0].innerHTML);  
  22.      headLi[i].childNodes[0].setAttribute("id",AutoTabId+"li"+parseInt(i+1));  
  23.      headLi[i].childNodes[0].attachEvent("onmouseover",function(){SetCurrentTab(currentClass,mainClass)});  
  24.     }  
  25.    }   
  26. }  
  27.  
  28. function SetCurrentTab(currentClass,mainClass)  
  29. {  
  30.    var e = arguments[2] || window.event;  
  31.    var oObject = e.srcElement || e.target;  
  32.    var bObject=oObject.parentNode.parentNode.childNodes;  
  33.    for(var i=0;i<bObject.length;i++)  
  34.    {  
  35.      bObject[i].setAttribute("class",mainClass);  
  36.      bObject[i].setAttribute("className",mainClass);  
  37.    }  
  38.     oObject.parentNode.setAttribute("class",currentClass);  
  39.     oObject.parentNode.setAttribute("className",currentClass);  
  40.     var locations=oObject.getAttribute("href").split("#");  
  41.     var currentId;  
  42.     if(locations.length>0)currentId=locations[1];  
  43.     ShowCurentTab(currentId);  
  44. }  
  45. function ShowCurentTab(currentId)  
  46. {  
  47.    var bodyul=$(currentId).parentNode.childNodes;  
  48.    for(var i=0;i<bodyul.length;i++)  
  49.    {  
  50.     if(bodyul[i].getAttribute("id")==currentId)  
  51.     {  
  52.      bodyul[i].style.display="block";  
  53.       
  54.     }  
  55.     else 
  56.     {  
  57.      bodyul[i].style.display="none";  
  58.     }  
  59.    }  
  60. }  
  61. function $(object)  
  62. {  
  63. return document.getElementById(object)  
  64. }  
  65.  
  66.  
  67. HTML Demon 如下  
  68.  
  69. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  70. <html xmlns="http://www.w3.org/1999/xhtml">  
  71. <head>  
  72. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  73. <title>无标题文档</title>  
  74. <style type="text/css">  
  75. BODY {   
  76. padding-right: 0px; padding-left: 0px; font-size: 12px; padding-bottom: 0px; margin: 0px auto; color: black; line-height: 150%; padding-top: 10px; background-color: white; text-align: center ;  
  77. }   
  78. .Header  
  79. {  
  80.  
  81. margin-bottom:0px;  
  82. padding-bottom:0px;  
  83. padding-left:0px;  
  84. border:none;  
  85. width:350px;  
  86. border-bottom:#c2130e 3px solid;  
  87. }  
  88. .Header ul  
  89. {  
  90. margin-left:0px;  
  91. list-style-type:none;  
  92. font-weight: bold;   
  93. width: 350px;  
  94. margin-bottom:0px;  
  95. padding-bottom:0px;  
  96. border:0px;  
  97. }  
  98. .Header ul li  
  99. {  
  100. float:left;  
  101. border-left:#f2f2f2 1px solid; width:60px;  
  102. }  
  103. #Header ul li a:Link  
  104. {  
  105. color:#333333;  
  106. text-decoration:none;  
  107. }  
  108. .Header ul li a:active  
  109. {  
  110. color:#333333;  
  111. text-decoration:none;  
  112. }  
  113. .Header ul li a:visited  
  114. {  
  115. color:#333333;  
  116. text-decoration:none;  
  117. }  
  118. .Header ul li a:hover  
  119. {  
  120. color:#333333;  
  121. text-decoration:none;  
  122. }  
  123. #autoTab{  
  124. margin-left:auto;  
  125. margin-right:auto；  
  126. }  
  127. .current  
  128. {  
  129. background-color:#c2130e;  
  130. }  
  131. .mainli{  
  132. background-color:#dcdcdc;  
  133. }  
  134. ul  
  135. {  
  136. padding-left:0px;  
  137. margin-left:0px;  
  138. }  
  139. li  
  140. {  
  141. list-style:none;  
  142. }  
  143. .showdiv{  
  144. text-aligin:left;  
  145. }  
  146. </style>  
  147. <script type="text/javascript" src="AutoTab.js"></script>  
  148. <script type="text/javascript">  
  149. window.onload=function()  
  150. {  
  151.    var a=new autoTab("autoTab1","current","mainli");  
  152.    var b=new autoTab("autoTab2","current","mainli");   
  153. }  
  154. </script>  
  155. </head>  
  156.  
  157. <body>  
  158. <div id="autoTab1">  
  159. <div class="Header">  
  160.     <ul>  
  161.         <li class="current"><a href="#guowai" >国际新闻</a></li>  
  162.             <li class="mainli"><a href="#guonei">国内新闻</a></li>  
  163.             <li class="mainli"><a href="#difang">地方新闻</a></li>  
  164.         </ul>  
  165. </div>  
  166. <div style="clear:both"></div>  
  167.     <div class="showdiv">  
  168.         <div style="display:block;" id="guowai">  
  169.              <ul>  
  170.                 <li><a href="void(0);"< /span>>国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻</a></li>  
  171.                 <li><a href="void(0);"< /span>>国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻</a></li>  
  172.             </ul>  
  173.         </div>  
  174.         <div style="display:none;" id="guonei">  
  175.              <ul>  
  176.                 <li><a href="void(0);"< /span>>国内新闻国内新闻国内新闻国内新闻国内新闻国内新闻国内新闻</a></li>  
  177.                 <li><a href="void(0);"< /span>>国内新闻国内新闻国内新闻国内新闻国内新闻国内新闻国内新闻</a></li>  
  178.             </ul>  
  179.         </div>  
  180.          <div style="display:none;" id="difang">  
  181.              <ul>  
  182.                 <li><a href="void(0);"< /span>>地方新闻地方新闻地方新闻地方新闻地方新闻地方新闻地方新闻</a></li>  
  183.                 <li><a href="void(0);"< /span>>地方新闻地方新闻地方新闻地方新闻地方新闻地方新闻地方新闻</a></li>  
  184.             </ul>  
  185.         </div>  
  186. </div>  
  187. </div>  
  188.  
  189. <div id="autoTab2">  
  190. <div class="Header">  
  191.     <ul>  
  192.         <li class="current"><a href="#guowai1" >国际新闻</a></li>  
  193.             <li class="mainli"><a href="#guonei1">国内新闻</a></li>  
  194.             <li class="mainli"><a href="#difang1">地方新闻</a></li>  
  195.         </ul>  
  196. </div>  
  197. <div style="clear:both2"></div>  
  198.     <div class="showdiv">  
  199.         <div style="display:block;" id="guowai1">  
  200.              <ul>  
  201.                 <li><a href="void(0);"< /span>>国际新闻1111111111111111111111111111111111111111111</a></li>  
  202.                 <li><a href="void(0);"< /span>>国际新闻1111111111111111111111111111111111111111111</a></li>  
  203.             </ul>  
  204.         </div>  
  205.         <div style="display:none;" id="guonei1">  
  206.              <ul>  
  207.                 <li><a href="void(0);"< /span>>国内新闻111111111111111111111111111111111111111111</a></li>  
  208.                 <li><a href="void(0);"< /span>>国内新闻111111111111111111111111111111111111111111</a></li>  
  209.             </ul>  
  210.         </div>  
  211.          <div style="display:none;" id="difang1">  
  212.              <ul>  
  213.                 <li><a href="void(0);"< /span>>地方新闻111111111111111111111111111111111111111111</a></li>  
  214.                 <li><a href="void(0);"< /span>>地方新闻111111111111111111111111111111111111111111</a></li>  
  215.             </ul>  
  216.         </div>  
  217. </div>  
  218. </div>  
  219. </body>  
  220. </html>