Análisis exhaustivo del método de conmutación de páginas de pestañas

La forma de cambiar las pestañas es la siguiente:

1. Controle la pantalla y la ocultación de las pestañas

2. La pestaña no cambia, los datos están cargados

Controlar la pantalla y esconder las pestañas

Script front-end:

1. Implementación de jQuery:

 $ (function () {$ (". Sdkj-Tabs Li"). Click (function () {$ (this) .addclass ("on"). Siblings (). RemoveClass ("On"); var index = $ (". Sdkj-tabs li "). índice (this); $ (". cont-tabs> div "). eq (index) .show (). Siblings (). Hide ();});});

Introducir archivos jQuery, código simple

El archivo jQuery es grande, el navegador es incompatible

2. Implementación de JS

 función selectTab (showContent, SelfObj) {var tab = document.getElementById ("sdkj-tabs"). j = document.getElementById ("cont-tab"+i);

No hay necesidad de introducir archivos jQuery

El volumen del código es grande y se requieren funciones e ID para cada etiqueta

3. Implementación de complemento

 var tabs = function () {function tag (name, elem) {return (elem || document) .getElementsByTagName (name);} // Obtener el elemento de la función ID correspondiente ID (name) {return document.getElementById (name);} FUNTER (Elem) {Elem = Elem.FirstChild; return Elem && Elem.NodetpeTypeTiTiTiTiTiTiTiTiTipe? 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; 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 Aray elem = tag ("li", id (elemid)); var tabs = child (id (tabid)); var listnum = elem.length; var tabnum = tabshelength; console.log (tabs); for (var i = 0; i <listnum; i ++) {elem [i] .onclick = (function (i) {function de regreso () {para (((listiM; i ++) {elem [i] .onclick = (function (i) {function de regreso () {para (((listiM; i ++) {elem [i] .onclick = (function (i) {function de regreso () {para (((listi 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 "); // ejecutar

No es necesario introducir archivos jQuery, solo agregue la identificación del elemento matriz

Lo anterior es la descripción completa del análisis integral del método de conmutación de la página de pestañas introducida por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!