Este artigo compartilhou com você o código para implementar o efeito de comutação da guia no JS nativo para sua referência. O conteúdo específico é o seguinte
1.html parte
<body> <div id = "tab"> <div> <ul> <li> <a href = "#"> <div> entretenimento </div> </div> </body>
2.CSS Parte: Existem muitas maneiras de implementar a parte do estilo. Esta é a demonstração simples que escrevi, o CSS em que sou o pior. <...
.tab_menu .Selected {Background-Color: #aaa;} .tab_menu ul {altura: 30px;} .tab_menu ul li {float: esquerda; estilo de lista: nenhum; largura: 50px; altura: 30px; cor:#000; borda: sólido 1px Gray-Bottom: Nenhum; Alinhamento de texto: centro; altura da linha: 30px; Margem-direita: 3px;} .tab_menu ul li a {dececoração de texto: nenhum;} .tab_box {width: 170px; altura: 150px; border: sólido 1px cinza;} .tab_box.3. Parte importante do 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 estilo de menu ABOX [j] .className = 'hide'; // ocultar todos os tabdiv} ali [this.index] .className = '; ABOX [this.index] .className = ''; }}}Isso é simples e grosseiro, e não considera se Tabmenu e Tabbox têm vários estilos, e não se adaptar ao projeto é apenas uma maneira de pensar. Muitos lugares precisam ser melhorados. O seguinte é considerar a situação em que várias classes são marcadas, mas geralmente existem várias classes. Agora precisamos usar as habilidades para remover uma determinada classe e adicionar classe.
3.1 Adicione e exclua a classe em 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 é uma string, corte em uma matriz var '. z = 0; z <aclass.length; z ++) {if (aclass [z] == 'selected') {aclass.splice (z, 1); // usa o método de emenda da matriz para excluir a classe encontrada}} para (var k = 0; k <aclass1.Length; aclass1.splice (k, 1); }} ali [j] .className = aclass.join (''); // Todos os menus removem o estilo selecionado abox [j] .className+= 'hide'; // todas as caixas oculam abox [this.index] .className = aclass1.Join ('); estilo} } } }Os testes pessoais são eficazes, mas todos são um pouco confusos em um método. Além disso, quando há muitas classes, a eficiência também é um problema, mas não deve haver muitas classes == otimize no futuro. Esta função é muito simples de usar jQuery.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.