标签页的切换方式解析

标签页的切换方式

1、控制tab的显示与隐藏

2、tab不切换，数据加载

控制tab的显示与隐藏

前端脚本:

1、jquery实现：

$(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();
	});
});

引入jquery文件，代码简洁

jquery文件较大，浏览器不兼容

2、js 实现

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";
}

无需引入jquery文件
代码量大，需每个标签添加函数及ID

3、插件实现

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");//执行

无需引入jquery文件，只需添加父元素ID

适用才是真理。