Comment implémenter l'onglet JS

Cet article décrit la méthode d'implémentation de l'onglet JS. Partagez-le pour votre référence. L'analyse spécifique est la suivante:

1. Idées

1. Obtenez des éléments;

2. Ajouter l'événement OnClick ou OnMouSemove dans l'élément de bouton de boucle;

3. Lorsque vous cliquez sur le bouton actuel, il sera affiché dans un état mis en surbrillance. Grâce à la boucle FOR, tous les styles de bouton sont définis sur vide. Définissez l'affichage de tous les divs sur aucun.

4. Cliquez sur le bouton actuel pour ajouter le style, afficher le div actuel et définir l'affichage sur bloquer.

2. Code HTML:

 <div id = "div1"> <input type = "Button" value = "1" /> <input type = "Button" value = "2" /> <input type = "Button" value = "3" /> <input type = "Button" value = "4" / ​​div> <div> 33 </ div> <v> <v> <v> <v>

3. Pièce CSS:

 .Active {Background: # 9cc;}. Div2 {largeur: 300px; hauteur: 200px; Border: 1px # 66666 Solide; Affichage: Aucun;}

4. Code JS:

 <cript> window.onLoad = function () {var odIv = document.getElementById ('div1'); // get div var btn = odiv.getElementsByTagName ('input'); // get input var div2 = odiv.getElementsByTagName (div '); // Obtenez un div sous (i = 0; i <btn. btn [i] .index = i // btn [i] est le bouton I -th du bouton spécifié; Ajoutez un attribut d'index au bouton et définissez la valeur d'index sur i btn [i] .onclick = function () // L'événement i -th cliquez sur le bouton {pour (i = 0; i <btn.length; i ++) // Loop Supprimez le style du bouton et cachez la div {btn [i] .classname = '' // Effacer le style du bouton Div2 [i] .Style.Deplay = nothe '// / / / / id' / i] .style.DiSplay = nul 'le bouton Div2 [I] .Style.DiSplay =' Aucun '/ / Implayage du bouton Div2 [I] .Style.Deplay =' Aucun '// SHADICE DIV2 [I] .STYLE. div} this.classname = 'actif' // ajouter actif div2 [this.index] .style.display = 'block' // this.index est le div}}} </scripteur> actuel

J'espère que cet article sera utile à la programmation JavaScript de tous.