Cet article a partagé avec vous le code spécifique pour JS pour implémenter un effet de commutation d'onglet simple pour votre référence. Le contenu spécifique est le suivant
Code de commutation de l'onglet JS:
<! doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <meta name = "générateur" contenu = "editplus®"> <meta name = "auteur" contenu = ""> <meta name = "keywords" contenu = ""> <meta name = "contenu =" "> <Title> Documée </ Title> Rell =" STYLESHETER = "" "> <Title> Documée </ Titrée type = "text / css" href = "base.css" media = "all" /> <style type = "text / css"> a {couleur: # a0b3d6;}. onglets {border: 1px solide # a0b3d6; margin: 100px; width: 300px;}. tabs-nav A {Background: # eaf0fd; line-height: 30px; paddding: 0 20px; affichage: en ligne de bloc; bordure-droite: 1px solide # a0b3d6; border-bottom: 1px solide # a0b3d6; float: gauche;}. blanc; _position: relatif;}. Tabs-contenu {padding: 20px; border-top: 1px solide # a0b3d6; margin-top: -1px;} </ style> </ head> <body> <div id = "tabs"> <h2> <a href = "javascript :;> home </a> <a <a href = "javascript :;"> Technologie </a> <a href = "javascript :;"> Life </a> <a href = "javascrip Technologie technologique technologique technologique technologique technologique technologique Technologie Technologie Œuvres œuvres œuvres </p> </ div> <br/> <br/> <div id = "tabs2"> <h2> <a href = "javascript :;"> 11111 </a> <a href = "javascript :;"> 22222 </a> <a href = "javascript :;"> 33333 </a> </h2> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111. 22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 Type = "Text / JavaScript" src = "tabs.js"> </ script> <script type = "text / javascript"> window.onload = function () {tabs ('tabs', 'click'); tabs ('tabs2', 'muouseover');} </cript> </body> </html>Tabs.js
onglets de fonction (id, déclencheur) {var tabsbtn = document.getElementById (id) .getElementsByTagName ('h2') [0] .getElementsByTagName ('a'); var tabScontent = document.getElementById (id) .getElementsByTagName ('p'); for (var i = 0, len = tab i ++) {tabsbtn [i] .index = i; if (trigger == 'click') {tabsbtn [i] .oNClick = function () {clearclass (); this.className = 'on'; showContent (this.index);}} else if (Trigger == 'MouseOver') {tabsbtn [i] .onMouseOver = function () {clearClass (); this.classname = 'on'; showContent (this.index);}}} fonction showContent (n) {for (var i = 0, len = tabsbtn.length; i <len; i ++) {tabScontent [i] .classname = 'hide';} tabscontent [n] .classname = 'tabs-content'; clearclass () {for (var i = 0, len = tabsbtn.length; i <len; i ++) {tabsbtn [i] .classname = '';}}}base.css
@Charset "UTF-8"; / * @ Name: Base @ Fonction: Réinitialisez le style par défaut du navigateur * // * Empêchez l'impact de la couleur d'arrière-plan définie par l'utilisateur sur la page Web, ajoutez pour permettre aux utilisateurs de personnaliser les polices * / HTML {Color: Black; Background: White;} / * Les marges intérieures et externes font généralement les positions de performances de chaque style de navigateur différent différent de STYLE DIFFÉRENT * / corps, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pré, code, formulaire, champ, légende, entrée, textarea, p, blockquote, th, td, hr, bouton, article, mission, de détails, section, section, figure, pied de pied, hgroup, menu, nav, navigation, navigation {marge: 0; rembourrage: 0;} / * Notez que les éléments de formulaire n'héritent pas de la police parent * / corps, bouton, entrée, select, textarea {Font: 12px Simsun, Tahoma, Arial, Sans-Serif;} Entrée, SELECT, Textarea {Font-Size: 100%;} / * Supprimer les marges de chaque cellule de table {Border-Collapse: effondrement; espacement des bordures: 0;} / * ie bug fixe: th n'hérite pas le texte-align * / th {text-align: hériter;} / * supprimer la bordure par défaut * / fieldset, img {border: non;} / * ie6 7 8 (q) affiche le bogue comme représentation en ligne * / iframe {afficher: bloquer;} * / abbr, acronyme {border: nother; font-Variant: Normal;} / * cohérent del style * / del {text-decoration: ligne-through;} adresse, légende, cite, code, dfn, em, th, var {Font-style: normal; font-weight: 500;} / * supprimer l'identificateur avant la liste, li sera dans le poids * / ol, ul {Style de liste: Aucun;} / * Align est le facteur le plus important de la police de caractères, ne centrez pas tout * / Légende, th {Text-Align: Left;} / * de Yahoo, que le titre soit personnalisé, s'adapter à plusieurs applications système * / H1, H2, H3, H4, H5, H6 {Font Size: 100%; Font-Weight: 500;} {Content: '';} / * Unified SuperScript and Indice Script * / sub, sup {font-size: 75%; line-height: 0; position: relative; Vertical-agn: Baseline;} sup {top: -0.5em;} sub {bott {text-décoration: soulignement;} / * Le soulignement n'est pas affiché par défaut, en gardant la page Concise * / Ins, A {Text-Decoration: Aucun;} / * ie6,7 Focus Point Line Repose * / a: focus, *: focus {Outline: Aucun;} / * Clear Float * /. ClearFix: Before, .Clearfix: After {Content: ""; "; Affiche: Table;}. {Clear: les deux; débordement: caché;}. clearFix {zoom: 1; / * pour ie6 ie7 * /}. Clear {clairement: les deux; affichage: bloc; débordement: caché; hauteur: 0; ligne de la ligne: 0; FONT-Size: 0;} / * Définir l'affichage et masquer, généralement utilisé pour coopérer avec JS * /. Hide {Affichage: Aucun! {float: gauche; affichage: en ligne;}. fr {float: droite; affichage: en ligne;}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.