为什么要给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]); }