Este artículo ha compartido con usted el código para implementar el efecto de conmutación de pestañas en JS nativo para su referencia. El contenido específico es el siguiente
1. Parte de HTML
<body> <div id = "tab"> <div> <ul> <li> <a href = "#"> Affairs de corriente </a> </li> <li> <a href = "#"> Sports </a> </li> <li> <a href = "#"> entretenimiento </a> </li> </ul> </iv> <iv> div> astairs </diviv <biv </diviv <div> entretenimiento </div> </div> </body>
2. Parte de CSS: hay muchas formas de implementar la parte de estilo. Esta es la simple demostración que escribí, el CSS en el que soy el peor. <...
.tab_menu .selected {de fondo de fondo: #aaa;} .tab_menu ul {altura: 30px;} .tab_menu ul li {float: izquierda; list style: none; ancho: 50px; altura: 30px;#000; borde: sólido 1px Gray; Border-Bottom: Ninguno; Text-Align: Center; Line-Height: 30px; Margin-right: 3px;} .tab_menu ul li a {text-decoration: none;} .tab_box {width: 170px; altura: 150px; borde: sólido 1px gris;} .tab_box .hide {exhibición: ninuos;}3. Parte importante de JS:
Window.Onload = function () {var oTab = document.getElementById ('tab'); var ali = otab.getElementsBytagName ('li'); var oTabbox = otab.getElementsBytagName ('div') [1]; var abox = otabbox.getElementsBytagName ('div'); for (var i = 0; i <ali.length; i ++) {ali [i] .index = i; Ali [i] .Onclick = function () {for (var j = 0; j <ali.length; j ++) {ali [j] .classname = ''; // cancelar el estilo de menú aBOX [j] .classname = 'hide'; // hide todos los tabdivs} ali [this.index] .className = 'seleccionado'; abox [this.index] .classname = ''; }}}Esto es simple y crudo, y no considera si Tabmenu y Tabbox tienen múltiples estilos, y no adaptarse al proyecto es solo una forma de pensar. Muchos lugares deben mejorarse. Lo siguiente es considerar la situación en la que se etiquetan varias clases, pero generalmente hay múltiples clases. Ahora necesitamos usar las habilidades para eliminar una clase determinada y agregar clase.
3.1 Agregar y eliminar clase en JS nativo.
Window.Onload = function () {var oTab = document.getElementById ('tab'); var ali = otab.getElementsBytagName ('li'); var oTabbox = otab.getElementsBytagName ('div') [1]; var abox = otabbox.getElementsBytagName ('div'); for (var i = 0; i <ali.length; i ++) {ali [i] .index = i; ali [i] .OnClick = function () {for (var j = 0; j <ali.length; j ++) {var aclass = ali [j] .className.split ('' '); // element.ClassName es una cadena, cortada en una array var aclass1 = abox [j] .className.split (' '); // El mismo método se ha z = 0; z <aclass.length; z ++) {if (aclass [z] == 'selected') {aclass.splice (z, 1); // use el método de empalme de la matriz para eliminar la clase encontrada}} para (var k = 0; k <aclass1.length; k ++) {if (aclass1 [k] == '') Aclass1.splice (k, 1); }} ali [j] .className = aclass.join (''); // Todos los menús eliminan el estilo seleccionado ABOX [j] .classname+= 'hide'; // Todos los cuadros esconde abox [this.index] .classname = aclass1.join ('' ''); // La casilla actual muestra ali [this.index] .classname+= 'selection'; estilo} } } }Las pruebas personales son efectivas, pero todas son un poco complicadas en un método. Además, cuando hay muchas clases, la eficiencia también es un problema, pero no debería haber muchas clases == optimizarlo en el futuro. Esta función es muy simple de usar jQuery.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.