-
-
-
-
-
-
-
-
- var autoTab = function(AutoTabId,currentClass,mainClass)
- {
- var headLi=$(AutoTabId).childNodes[0].childNodes[0].childNodes;
- for(var i=0;i<headLi.length;i++)
- {
- var headliChild=headLi[i];
- if(window.addEventListener)
- {
- headLi[i].addEventListener("mouseover",function(){SetCurrentTab()},false);
- }
- else
- {
-
- headLi[i].childNodes[0].setAttribute("id",AutoTabId+"li"+parseInt(i+1));
- headLi[i].childNodes[0].attachEvent("onmouseover",function(){SetCurrentTab(currentClass,mainClass)});
- }
- }
- }
-
- function SetCurrentTab(currentClass,mainClass)
- {
- var e = arguments[2] || window.event;
- var oObject = e.srcElement || e.target;
- var bObject=oObject.parentNode.parentNode.childNodes;
- for(var i=0;i<bObject.length;i++)
- {
- bObject[i].setAttribute("class",mainClass);
- bObject[i].setAttribute("className",mainClass);
- }
- oObject.parentNode.setAttribute("class",currentClass);
- oObject.parentNode.setAttribute("className",currentClass);
- var locations=oObject.getAttribute("href").split("#");
- var currentId;
- if(locations.length>0)currentId=locations[1];
- ShowCurentTab(currentId);
- }
- function ShowCurentTab(currentId)
- {
- var bodyul=$(currentId).parentNode.childNodes;
- for(var i=0;i<bodyul.length;i++)
- {
- if(bodyul[i].getAttribute("id")==currentId)
- {
- bodyul[i].style.display="block";
-
- }
- else
- {
- bodyul[i].style.display="none";
- }
- }
- }
- function $(object)
- {
- return document.getElementById(object)
- }
-
-
- HTML Demon 如下
-
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>無標題文檔</title>
- <style type="text/css">
- BODY {
- 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 ;
- }
- .Header
- {
-
- margin-bottom:0px;
- padding-bottom:0px;
- padding-left:0px;
- border:none;
- width:350px;
- border-bottom:#c2130e 3px solid;
- }
- .Header ul
- {
- margin-left:0px;
- list-style-type:none;
- font-weight: bold;
- width: 350px;
- margin-bottom:0px;
- padding-bottom:0px;
- border:0px;
- }
- .Header ul li
- {
- float:left;
- border-left:#f2f2f2 1px solid; width:60px;
- }
- #Header ul li a:Link
- {
- color:#333333;
- text-decoration:none;
- }
- .Header ul li a:active
- {
- color:#333333;
- text-decoration:none;
- }
- .Header ul li a:visited
- {
- color:#333333;
- text-decoration:none;
- }
- .Header ul li a:hover
- {
- color:#333333;
- text-decoration:none;
- }
- #autoTab{
- margin-left:auto;
- margin-right:auto；
- }
- .current
- {
- background-color:#c2130e;
- }
- .mainli{
- background-color:#dcdcdc;
- }
- ul
- {
- padding-left:0px;
- margin-left:0px;
- }
- li
- {
- list-style:none;
- }
- .showdiv{
- text-aligin:left;
- }
- </style>
- <script type="text/javascript" src="AutoTab.js"></script>
- <script type="text/javascript">
- window.onload=function()
- {
- var a=new autoTab("autoTab1","current","mainli");
- var b=new autoTab("autoTab2","current","mainli");
- }
- </script>
- </head>
-
- <body>
- <div id="autoTab1">
- <div class="Header">
- <ul>
- <li class="current"><a href="#guowai" >國際新聞</a></li>
- <li class="mainli"><a href="#guonei">國內新聞</a></li>
- <li class="mainli"><a href="#difang">地方新聞</a></li>
- </ul>
- </div>
- <div style="clear:both"></div>
- <div class="showdiv">
- <div style="display:block;" id="guowai">
- <ul>
- <li><a href="void(0);"< /span>>國際新聞國際新聞國際新聞國際新聞國際新聞國際新聞國際新聞</a></li>
- <li><a href="void(0);"< /span>>國際新聞國際新聞國際新聞國際新聞國際新聞國際新聞國際新聞</a></li>
- </ul>
- </div>
- <div style="display:none;" id="guonei">
- <ul>
- <li><a href="void(0);"< /span>>國內新聞國內新聞國內新聞國內新聞國內新聞國內新聞國內新聞</a></li>
- <li><a href="void(0);"< /span>>國內新聞國內新聞國內新聞國內新聞國內新聞國內新聞國內新聞</a></li>
- </ul>
- </div>
- <div style="display:none;" id="difang">
- <ul>
- <li><a href="void(0);"< /span>>地方新聞地方新聞地方新聞地方新聞地方新聞地方新聞地方新聞</a></li>
- <li><a href="void(0);"< /span>>地方新聞地方新聞地方新聞地方新聞地方新聞地方新聞地方新聞</a></li>
- </ul>
- </div>
- </div>
- </div>
-
- <div id="autoTab2">
- <div class="Header">
- <ul>
- <li class="current"><a href="#guowai1" >國際新聞</a></li>
- <li class="mainli"><a href="#guonei1">國內新聞</a></li>
- <li class="mainli"><a href="#difang1">地方新聞</a></li>
- </ul>
- </div>
- <div style="clear:both2"></div>
- <div class="showdiv">
- <div style="display:block;" id="guowai1">
- <ul>
- <li><a href="void(0);"< /span>>國際新聞1111111111111111111111111111111111111111111</a></li>
- <li><a href="void(0);"< /span>>國際新聞1111111111111111111111111111111111111111111</a></li>
- </ul>
- </div>
- <div style="display:none;" id="guonei1">
- <ul>
- <li><a href="void(0);"< /span>>國內新聞111111111111111111111111111111111111111111</a></li>
- <li><a href="void(0);"< /span>>國內新聞111111111111111111111111111111111111111111</a></li>
- </ul>
- </div>
- <div style="display:none;" id="difang1">
- <ul>
- <li><a href="void(0);"< /span>>地方新聞111111111111111111111111111111111111111111</a></li>
- <li><a href="void(0);"< /span>>地方新聞111111111111111111111111111111111111111111</a></li>
- </ul>
- </div>
- </div>
- </div>
- </body>
- </html>
