为什么要给tab切换函数传入父节点

当一个页面有多个tab的时候,我们通过导航标签来控制内容显示就要求知道我们是获取的是那个tab的导航标签,要控制的是那个导航下的内容,这就需要知道导航标签从属于哪个tab,所以我们在获取导航标签的时候需要传入它的父节点。tab函数在调用的时候将这个父节点传入,在getElementsByClassName()中获得这个父节点,从而每次调用都能取得对应的导航标签。如:

function setTab(root){
    var tabMenus=GLOBAL.Dom.getElementsByClassName("J_tab-menu",root),
    tabContents=GLOBAL.Dom.getElementsByClassName("J_tab-content",root);
    for(var i=0;i<tabMenus.length;i++){
        tabMenus[i]._index=i;
        tabMenus[i].onclick=function(){
            for(var j=0;j<tabContents.length;j++){
                tabContents[j].style.display="none";    
            }
            tabContents[this._index].style.display="block";
            
        }
    }        
}

然后通过一个循环来遍历页面所有的tab,并分别传入导航标签的父节点,也就实现了多个tab切换:

var tabs=GLOBAL.Dom.getElementsByClassName("J_tab");
for(var i=0;i<tabs.length;i++){
    setTab(tabs[i]);    
}

 

posted on 2016-09-06 16:15  指尖的力量  阅读(133)  评论(0)    收藏  举报

导航