Le code est assez concis et facile à comprendre, il n'y a donc plus de non-sens.
Présenter directement le code:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" content = "text / html" charset = "utf-8">
<Title> JS TAB SIMPLE </TITME>
<script type = "text / javascript" src = "js / démo.js"> </ script>
<style type = "text / css">
* {taille de police: 14px; marge: 0px;}
A {couleur: # a0b3d6; text-décoration: aucun;}
.Tabs {Border: 1px solide # a0b3d6; marge: 100px; largeur: 350px;}
.tabs-nav a {background: # eaf0fd; Heure de ligne: 30px; rembourrage: 0px 20px 0px 20px; Affichage: bloc en ligne; bordure-droite: 1px solide # A0B3D6; Border-Bottom: 1px solide # a0b3d6; Float: à gauche;}
.tabs-nav .on {fond: blanc; Border-Bottom: 1px blanc solide; Position: relative;}
.tabs-contenu {affichage: bloc; rembourrage: 20px; border-top: 1px solide # a0b3d6; marge: -1px;}
.tabs-content_hide {affichage: aucun;}
</ style>
</ head>
<body>
<div id = "tabs">
<h2>
<a href = "javascript :;"> Home </a>
<a href = "javascript :;"> Technologie </a>
<a href = "javascript :;"> vie </a>
<a href = "javascript :;"> fonctionne </a>
</h2>
<div style = "Clear: les deux;"> </div>
<p> Home </p>
<p> Technologie </p>
<p> Life </p>
<p> fonctionne </p>
</div>
</docy>
<foomer> </footer>
</html>
--------------------------------------------------------------------------------------------------------------------------------
La copie de code est la suivante:
window.onload = function () {
Tabs ("Tabs", "Mouseover");
}
onglets de fonction (id, déclencheur) {
var tabBtn = document.getElementById (id) .getElementsByTagName ("H2") [0] .getElementsByTAGName ("A");
var tabSContent = document.getElementById (id) .getElementsByTagName ("p");
pour (var i = 0; i <tabbtn.length; i ++) {
TabBtn [i] .Index = i;
if (Trigger == 'Mouseover') {
tabbtn [i] .onMouseOver = function () {
ClearClass ();
this.classname = "on";
showContent (this.index);
}
}
Fonction ShowContent (n) {
pour (var i = 0; i <tabscontent.length; i ++) {
tabSContent [i] .Index = i;
tabSContent [i] .classname = "tabs-content_hide";
}
tabSContent [n] .classname = "tabs-content";
}
fonction clearclass () {
pour (var i = 0; i <tabbtn.length; i ++) {
tabBtn [i] .classname = "";
}
}
}
}
Est-il très simple d'obtenir l'effet de commutation de l'onglet? Les amis peuvent l'utiliser dans leurs propres projets après l'avoir embelli.