全面解析标签页的切换方式

$(function(){$(".sdkj-tabs li").click(function() {$(this).addClass("on").siblings().removeClass("on");var index=$(".sdkj-tabs li").index(this);$(".cont-tabs>div").eq(index).show().siblings().hide();});});

function selectTab(showContent,selfObj){var tab = document.getElementById("sdkj-tabs").getElementsByTagName("li");var tablength = tab.length;for(i=0; i<tablength; i++){tab[i].className = "";}selfObj.className = "on";// 标签页切换for(i=0; j=document.getElementById("cont-tab"+i); i++){j.style.display = "none";}document.getElementById(showContent).style.display = "block";}

var tabs=function(){function tag(name,elem){return (elem||document).getElementsByTagName(name);}//获得相应ID的元素function id(name){return document.getElementById(name);}function first(elem){elem=elem.firstChild;return elem&&elem.nodeType==1? elem:next(elem);}function next(elem){elem=elem.nextSibling;while(elem){if(elem.nodeType==1){return elem;}else{elem=elem.nextSibling;}} }function child(elem){var arrays = new Array();var array_int=0;var elem_child=first(elem);for(array_int=0;elem_child;array_int++){//console.log("elem:"+elem);arrays[array_int]=elem_child;elem_child=next(elem_child);} return arrays;}return {set:function(elemId,tabId){var elem=tag("li",id(elemId));var tabs=child(id(tabId));var listNum=elem.length;var tabNum=tabs.length;console.log(tabs);for(var i=0;i<listNum;i++){elem[i].onclick=(function(i){return function(){for(var j=0;j<3;j++){if(i==j){tabs[j].style.display="block";elem[j].className="on";}else{tabs[j].style.display="none"; elem[j].className=" ";}}}})(i)}}}}();tabs.set("sdkj-tabs","cont-tabs");//执行