Cet article décrit la méthode d'implémentation de l'effet de commutation du menu d'onglet par JS + CSS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
index.css est le suivant:
Copiez le code comme suit: * {
marge: 0px;
rembourrage: 0px;
}
corps {
Largeur: 600px;
marge: 0 auto;
Color en arrière-plan: argent;
}
#Contanier {
Color d'arrière-plan: jaune;
Largeur: 600px; hauteur: 400px;
}
#tabnavi {
Largeur: 600px; hauteur: 30px;
Color d'arrière-plan: # 00BFFF;
Décoration du texte: aucune;
Type de style liste: aucun;
}
#tabnavi li {
flottant: à gauche;
marge-droite: 7px;
Color d'arrière-plan: # 008B8B;
Couleur: blanc;
curseur: pointeur;
Largeur: 60px;
hauteur: 28px;
hauteur de ligne: 30px;
Texte-aligne: Centre;
}
#contenu {
Largeur: 600px; hauteur: 370px;
Color d'arrière-plan: blanc;
}
Index.html est le suivant:
Copiez le code comme suit: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS réalise l'effet de commutation dynamique du menu d'onglet </TITME>
<link href = "css / index.css" rel = "Stylesheet" />
<script type = "text / javascript">
fonction gel (id) {
return document.getElementById (id);
}
var arr = [
{"Title": "News", "Content": "Ceci est une chaîne d'information"},
{"Title": "Financial", "Contenu": "Ceci est le canal financier"},
{"Title": "Entertainment", "Content": "Ceci est une chaîne de divertissement"},
{"Title": "Sports", "Content": "Ceci est une chaîne sportive"},
{"Title": "Car", "Content": "Ceci est le canal de la voiture"},
{"title": "vidéo", "contenu": "Ceci est une chaîne vidéo"},
{"Title": "Life", "Content": "Ceci est un canal de vie"}
]]
window.onload = function () {
pour (var i = 0; i <arr.length; i ++) {
var linew = document.CreateElement ("li");
linew.innerhtml = arr [i] .title;
gel ("tabnavi"). appendchild (linew);
// lier les événements de clic sur ces LIS, vous devez donc attribuer une propriété à chacun d'eux (de préférence ID)
linew.setAttribute ("id", i);
linew.onclick = function () {
var navs = gel ("tabnavi"). childNodes;
// efface toutes les couleurs
pour (var j = 0; j <navs.length; j ++) {
if (navs [J] .NodeType == 1) {
navs [j] .style.backgroundcolor = "# 008b8b";
}
}
this.style.backgroundColor = "Red";
gel ("contenu"). innerhtml = arr [this.id] .Content;
};
}
};
</cript>
</ head>
<body>
<div id = "contanier">
<ul id = "tabnavi"> </ul>
<div id = "Content"> </div>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.