全面解析標籤頁的切換方式

標籤頁的切換方式如下所示：

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

以上所述是小編給大家介紹的全面解析標籤頁的切換方式的全部敘述，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！