Umfassende Analyse der Schaltmethode von TAB -Seiten

Die Möglichkeit zum Schalten von Registerkarten ist wie folgt:

1. Steuern Sie die Anzeige und das Ausblenden von Registerkarten

2. Die Registerkarte wechselt nicht, die Daten werden geladen

Steuern Sie die Anzeige und das Ausblenden von Registerkarten

Front-End-Skript:

1. JQuery -Implementierung:

 $ (function () {$ (". li "). Index (this);

Stellen Sie JQuery -Dateien vor, der Code ist einfach

Die JQuery -Datei ist groß, der Browser ist unvereinbar

2. JS -Implementierung

 Funktion SelectTab (ShowContent, selfObj) {var tab = document.getElementById ("Sdkj-tabs"). j = document.getElementById ("cont-tab"+i);

Es ist nicht erforderlich, JQuery -Dateien vorzustellen

Das Codevolumen ist groß und für jedes Tag sind Funktionen und IDs erforderlich

A. Plug-in-Implementierung

 var tabs = function () {function tag (name, elem) {return (elem || dokument) .getElementsByTagName (name);} // Erhalten Sie das Element der entsprechenden ID -Funktion id (name) {return document.getElementById (Name); Elem: Next (Elem);} Funktion Next (elem) {elem = elem.nextSsibling; while (elem) {if (elem.nodetype == 1) {return elem;} else {Elem = Elem.NextSio; 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); 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

Sie müssen keine JQuery -Dateien vorstellen. Fügen Sie einfach übergeordnete Element -ID hinzu

Das obige ist die vollständige Beschreibung der umfassenden Analyse der Schaltmethode der vom Editor eingeführten Registerkartenseite. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!