Fully parse the switch mode of the tab and fully parse the switch mode of the tab

Fully parse the switch mode of the tab and fully parse the switch mode of the tab

The switch mode of the tab is as follows:

1. Display and hide tabs

2. No tab switchover and Data Loading

Display and hide 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 the jquery file, and the code is concise

Large jquery file, incompatible with browsers

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"; // switch the tab 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

A large amount of code requires Adding Functions and IDs for each tag

3. Plug-in implementation

Var tabs = function () {function tag (name, elem) {return (elem | document ). getElementsByTagName (name);} // obtain the 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 the jquery file. You only need to add the parent element ID.

The above section describes how to switch tabs in a comprehensive manner. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!