用js实现tab菜单及下拉菜单

        经常浏览网页的时候可以看到tab菜单，而实现这个效果的方法有很多种，这里主要跟大家分享一下用原生js实现tab菜单的方法。

        原生js实现tab菜单和下拉菜单都有两种方法，一种是普遍的for循环，一种是事件委托。下面会分别说一下两种方式。

        tab菜单：

        html源码：

        

       css源码：

       

       目前在页面的显示：

   

      js代码实现：

<script type="text/javascript">
(function() {
      var li = document.getElementById('Jcontrol').getElementsByTagName('li');
      var cli = document.getElementById('Jcontent').getElementsByTagName('li');
      var timer ;
      var index = 0;  //定义一个变量，用来自定义索引
     function init(setIndex){  
          cli[index].style.display = "none";  //现将所有菜单项的内容隐藏
          li[index].style.backgroundColor = "#eaeaea";
          index = setIndex;  //改变索引
          li[index].style.backgroundColor = "#f60";
          cli[index].style.display = "block";  //显示当前菜单项的内容
     }
    timer = setInterval(play, 2000);
    for (var i = 0 , len=li.length; i < len ; i++) {
         li[i].index = i;
         li[i].onmouseover = function(){
               clearInterval(timer) ;//当鼠标经过时停止自动切换，切换到当前的菜单。
               init(this.index);
         }
         li[i].οnmοuseοut=function () {  //鼠标离开菜单项时执行自动切换
              timer = setInterval(play, 2000);
         }
    }
   function play(){
        var _index = (li.length-1 == index) ? 0 : index +1 ;  //设置一个_index，避免改变全局的index
        init(_index);
    }
})();

</script>

       上面的js代码不仅仅实现了tab菜单效果，并且添加了一个自动切换，每隔2秒就会自动跳到下一个菜单。

       下拉菜单

       html源码：

       

      css源码：

      

      使用for循环实现下拉菜单：

      

     使用事件委托实现下拉菜单：

     (function(){
          //这句判断必须要
          if (document.getElementById('Jcontrol')) {
          var control = document.getElementById('Jcontrol');

          //递归查找父层,判断是否li,如果是 返回 li 元素
         function getP(obj,name) {
                while(obj && obj.tagName.toLowerCase()!='body'){
                        if (obj.tagName.toLowerCase()==name) {
                             return obj;
                         };
                         obj = obj.parentNode ;
               }
               return false;
        }

       function tab(event){
             event = event || window.event;
             var target = event.target || event.srcElement;
             if (getP(target,'li')) {
                     var li = getP(target,'li');
                     li.className = event.type=='mouseover' ?  'show' : '' ;
             };
        }
        control.onmouseover = function(){
                 tab();
        }
        control.onmouseout = function(){
              tab();
          }
    };
})();

      上面的代码则是下拉菜单使用事件委托的所有js代码。相对for循环来说，事件委托要难理解一点，上面的代码阅读起来要困难一些，但是使用事件委托具有以下的优点：

    1.需要管理的函数变少了
    2.占用的内存少了
    3.javascript代码和Dom结构之间的关联更少了

    至于想要使用哪种方法去实现这个效果，则看个人喜好吧