Comprehensive analysis of the switching method of tab pages

The way to switch tabs is as follows:

1. Control the display and hide of tabs

2. The tab does not switch, the data is loaded

Control the display and hide of tabs

Front-end script:

1. jquery implementation:

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

Introduce jquery files, simple code

The jquery file is large, the browser is incompatible

2. js implementation

 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";// Tag page switching for(i=0; j=document.getElementById("cont-tab"+i); i++){j.style.display = "none";}document.getElementById(showContent).style.display = "block";}

No need to introduce jquery files

The code volume is large, and functions and IDs are required for each tag

3. Plug-in implementation

 var tabs=function(){function tag(name,elem){return (elem||document).getElementsByTagName(name);}//Get the element of the corresponding 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");//Execute

No need to introduce jquery files, just add parent element ID

The above is the full description of the comprehensive analysis of the switching method of the tab page introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!