tab练习...

Submitted by 爱得 on 2010, March 29, 2:46 PM. Web标准

1.html结构

XML/HTML代码
  1. <div id="tabBox">  
  2.    <div id="tabMenu">  
  3.        <ul>  
  4.           <li class="cursor">选择一</li>  
  5.           <li>选择二</li>  
  6.        </ul>  
  7.    </div>  
  8.    <div id="tabContent">  
  9.       <div>  
  10.          <ul>  
  11.    <li><a href="">有无关于前端，WEB标准等的杂志 New1</a></li>  
  12.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  13.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  14.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  15.          </ul>  
  16.       </div>  
  17.       <div class="aide">  
  18.          <ul>  
  19.    <li><a href="">有无关于前端，WEB标准等的杂志 New2</a></li>  
  20.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  21.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  22.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  23.          </ul>  
  24.       </div>  
  25.    </div>  
  26. </div>  
  27. <script type="text/javascript">aiTab('tabMenu','tabContent');</script>  


2.JS部分

JavaScript代码
  1. <script type="text/javascript">   
  2. function aiTab(tabNav,tabBody){   
  3.  var tabMenu = document.getElementById(tabNav);   
  4.  var tabTitle = tabMenu.getElementsByTagName("li");   
  5.  var tabContent = document.getElementById(tabBody);   
  6.  var tabBody = tabContent.getElementsByTagName("div");   
  7.   
  8.  function switchTab(i){   
  9.   tabTitle[i].onmouseover = function (){   
  10.    for (j=0;j<tabTitle.length;j++){   
  11.     if (i==j){   
  12.      tabTitle[j].className = "cursor";   
  13.      tabBody[j].style.display = "block";       
  14.     }   
  15.     else{   
  16.      tabTitle[j].className = "";   
  17.      tabBody[j].style.display = "none";   
  18.     }   
  19.    }   
  20.   }   
  21.  }   
  22.  for (i=0;i<tabTitle.length;i++){   
  23.   switchTab(i);   
  24.  }   
  25. }   
  26. </script>  

纯碎地练习下前人写过的...

这里有个 demo ......

« 上一篇 | 下一篇 »

发表评论

注:网址请加上 http:// 若无,报错...

评论内容 (必填):