原生javascript實作Tab選項卡切換功能_javascript技巧

分析個人用原生JS取得類別名稱元素的程式碼：

複製程式碼 程式碼如下:

getByClassName:function(className,parent){
            var elem = [],
                node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsBy?parent.getElementsByTagName('*'):document.getElementsBy?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
                p = new RegExp("(^|\s)" className "(\s|$)");
            for(var n=0,i=node.length;n                 if(p.test(node[n].className)){
                    elem.push(node[n]);
                }
            }
            return elem;
        }

　　parent參數是可選的，但需要先判斷它是否存在，且是節點dom元素parent != undefined&&parent.nodeType==1 ，nodeType == 1可以判斷節點是否為dom元素，在火狐瀏覽器裡面，空白也算是節點（.childnodes），用這個屬性就判斷是否為dom元素，排除空白符.

移除元素的類別名稱：

複製程式碼 程式碼如下:

var cur = new RegExp(this.sCur,'g');  //this.sCur就是類別名，這裡是用變數儲存 如：this.sCur = "cur";
           this.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');        

呼叫範例：

複製程式碼 程式碼如下:

   
   
   


   

        使用阅读 ：

        　　  {'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c','cur':'tab-cur'} 【必选】

        　　（1）'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c'　　选择器：只支持 #id　.className，(ID + 空格 + 类名) 【必选】

        　　（2）'cur':'tab-cur'（默认） ：为切换按钮当前状态（类名）【必选】

        　　（3）'type':'mouseover'|| 'clicl' 默认是点击 【可选】
   

   

tabA

    

new LGY_tab({'tabBtn':'#tabA .tab-i',<br>
    'tabCon':'#tabA .tab-c',<br>
    'cur':'tab-cur'<br>
    });<br>
         

   

       

           
• btn-A

           
• btn-B

       

       

con-A

       

con-B

   

   

tabB

    

new LGY_tab({'tabBtn':'#tabB .tab-i',<br>
    'tabCon':'#tabB .tab-k',<br>
    'cur':'tab-cur02',<br>
    'type':'mouseover'<br>
    });<br>
         

   

       

           
• btn-A

           
• btn-B

           
• btn-C

       

       

con-A

       

con-B

       

con-C

   

   
   
    //
    new LGY_tab({'tabBtn':'#tabA .tab-i',
                 'tabCon':'#tabA .tab-c',
                 'cur':'tab-cur'
    });
    //
    new LGY_tab({'tabBtn':'#tabB .tab-i',
                 'tabCon':'#tabB .tab-k',
                 'cur':'tab-cur02',
                 '型態』:'滑鼠停停'
    });
    //測試
    //
    new LGY_tab({'tabBtn':'#tabB .tab-j',
                 'tabCon':'#tabB .tab-k',
                 'cur':'tab-cur02',
                 '型態』:'滑鼠停停'
    });
    腳本>
身體>