Cet article a partagé avec vous le code pour implémenter l'effet de commutation d'onglet Onglet dans Native JS pour votre référence. Le contenu spécifique est le suivant
1.HTML PARTIE
<body> <div id = "tab"> <div> <ul> <li> <a href = "#"> Affaires courantes </a> </li> <li> <a href = "#"> Sports </a> </li> <li> <a href = "#"> Entertainment </a> </li> </ul> </ div> <v> <v> <v> Affairs actuels </liv> </ Div> </ Div> <v> <V> <div> Entertainment </div> </div> </ body>
2.CSS Partie: Il existe de nombreuses façons de mettre en œuvre la partie de style. C'est la simple démo que j'ai écrite, le CSS dans lequel je suis le pire. <...
.tab_menu .Selected {background-Color: #aaa;} .tab_menu ul {height: 30px;} .tab_menu ul li {float: gauche; list-style: Aucun; width: 50px; height: 30px; couleur: # 000; bordure: solide 1px; gris; border-boot: Aucun; Text-Align: Center; Line-Height: 30px; margin-droite: 3px;} .tab_menu ul li a {Text-Decoration: Aucun;} .tab_box {width: 170px; height: 150px; border: solid 1px gris;} .tab_box .hide {affiche: aucun;}.3. Partie JS importante:
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 = ''; // annul menu style abox [j] .classname = 'hide'; // cache tout tabdivs} ali [this.index] .classname = 'sélectionné'; abox [this.index] .classname = ''; }}}C'est simple et brut, et il ne considère pas si TabMenu et Tabbox ont plusieurs styles, et ne pas s'adapter au projet n'est qu'une façon de penser. De nombreux endroits doivent être améliorés. Ce qui suit est de considérer la situation où plusieurs classes sont taguées, mais généralement il y a plusieurs classes. Nous devons maintenant utiliser les compétences pour supprimer une certaine classe et ajouter une classe.
3.1 Ajouter et supprimer la classe dans JS natif.
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 est une chaîne, coupée en arrat var aclass1 = abox [j] .classname.Split (''); z = 0; z <aclass.length; z ++) {if (aclass [z] == 'selected') {aclass.splice (z, 1); // utilisez la méthode d'épissure du tableau pour supprimer la classe trouvée}} pour (var k = 0; k <aclass1. ' aclass1.splice (k, 1); }} Ali [j] .classname = aclass.join (''); // tous les menus suppriment le style sélectionné abox [j] .classname + = 'hide'; // toutes les boîtes masquer abox [this.index] .classname = aclass1.join (''); // la boîte actuelle affiche Ali [ce.index] .classname + = ' style} } } }Les tests personnels sont efficaces, mais ils sont tous un peu désordonnés dans une méthode. De plus, lorsqu'il existe de nombreuses classes, l'efficacité est également un problème, mais il ne devrait pas y avoir beaucoup de classes == Optimiser à l'avenir. Cette fonction est très simple à utiliser jQuery.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.