Análise abrangente do método de comutação das páginas de guia

A maneira de mudar de guias é a seguinte:

1. Controle a tela e a esconder

2. A guia não muda, os dados são carregados

Controle a tela e a esconder

Script front-end:

1. Implementação do jQuery:

 $ (function () {$ (". sdkj-tabs li"). click (function () {$ (this) .addclass ("on"). irmãos (). removeclass ("on"); var index = $ (". sdkj-tabs li "). ÍNDICE (this); $ (". cont-tabs> div "). Eq (index) .show (). irmãos (). hide ();});});

Introduzir arquivos jQuery, código simples

O arquivo jQuery é grande, o navegador é incompatível

2. Implementação de JS

 função selectTab (SHOSTCONTENT, SelfObJ) {var tab = document.getElementById ("sdkj-tabs"). getElementsByTagName ("li"); var tablength = tab.length; para (i = 0; i <Tablength; i ++) {[i] .className = "; j = document.getElementById ("cont-tab"+i);

Não há necessidade de introduzir arquivos jQuery

O volume de código é grande e funções e IDs são necessários para cada tag

3. Implementação de plug-in

 var tabs = function () {tag function (nome, elem) {return (elem || document) .getElementsByTagName (name);} // Obtenha o elemento do ID da função correspondente (name) {return document.GetSchild; Elem: a seguir (elem);} função a seguir (elem) {elem = elem.nextslibling; while (elem) {if (elem.nodetype == 1) {return elem;} else {elem = elem matrics = newn = newn Array (); elem_child = primeiro (elem); para (array_int = 0; elem_child; array_int ++) {// console.log ("elem:"+elem); arrays [Array_int] = elem_child; elem_child = (next function_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 = "nenhum"; elem [j]. ";}}}}}) (i)}}}} (); tabs.set (" sdkj-tabs "," cont-tabs "); // execute

Não há necessidade de introduzir arquivos jQuery, basta adicionar ID do elemento pai

O exposto acima é a descrição completa da análise abrangente do método de comutação da página da guia introduzida pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!