原生javascript實作Tab選項卡切換功能_javascript技巧-js教程-PHP中文網

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

WBOY

發布： 2016-05-16 16:21:04

原創

1176 人瀏覽過

分析個人用原生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,'');         

呼叫範例：

複製程式碼程式碼如下:

    Document

        使用阅读：

        　　 {'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',
                 '型態』:'滑鼠停停'
    });
    腳本>
身體>