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

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

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

        tab菜单：

        html源码：

        

       css源码：

       

       目前在页面的显示：

   

      js代码实现：

       上面的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结构之间的关联更少了

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