Dieser Artikel beschreibt die Methode zur Implementierung des TAB -Menüschiebungseffekts durch JS+CSS. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Index.css ist wie folgt:
Kopieren Sie den Code wie folgt:* {
Rand: 0px;
Polsterung: 0px;
}
Körper {
Breite: 600px;
Rand: 0 Auto;
Hintergrundfarbe: Silber;
}
#Contanier {
Hintergrundfarbe: Gelb;
Breite: 600px; Höhe: 400px;
}
#Tabnavi {
Breite: 600px; Höhe: 30px;
Hintergrundfarbe: #00BFFF;
Textdekoration: Keine;
Typ-Typ-Typ: Keine;
}
#Tabnavi li {
float: links;
Rand-Rechts: 7px;
Hintergrundfarbe: #008B8B;
Farbe: weiß;
Cursor: Zeiger;
Breite: 60px;
Höhe: 28px;
Zeilenhöhe: 30px;
Text-Align: Mitte;
}
#Inhalt {
Breite: 600px; Höhe: 370px;
Hintergrundfarbe: weiß;
}
Index.html ist wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/>
<titels> js realisiert den dynamischen Switching -Effekt des Registerkarte Menü </title>
<link href = "css /index.css" rel = "stylesheet" />
<script type = "text/javaScript">
Funktion Gel (id) {
return document.getElementById (id);
}
var arr = [
{"Titel": "News", "Inhalt": "Dies ist ein Nachrichtensender"},
{"Titel": "Finanz", "Inhalt": "Dies ist der Finanzkanal"},
{"Titel": "Unterhaltung", "Inhalt": "Dies ist ein Unterhaltungskanal"},
{"Titel": "Sport", "Inhalt": "Dies ist ein Sportkanal"},
{"Titel": "Car", "Inhalt": "Dies ist der Autokanal"},
{"Titel": "Video", "Inhalt": "Dies ist ein Videokanal"},
{"Titel": "Leben", "Inhalt": "Dies ist ein Lebenskanal"}
];
window.onload = function () {
für (var i = 0; i <arr.length; i ++) {
var linew = document.createelement ("li");
linew.innerhtml = arr [i] .Title;
Gel ("tabnavi"). appendChild (linew);
// Binden Sie auf diese LIS -Ereignisse auf Ereignisse, sodass Sie jedem von ihnen eine Eigenschaft zuweisen müssen (vorzugsweise ID)
linew.setattribute ("id", i);
linew.onclick = function () {
var navs = Gel ("tabnavi"). Childnodes;
// Alle Farben löschen
für (var j = 0; j <navs.length; j ++) {
if (navs [j] .nodetype == 1) {
NAVs [j] .Style.backgroundcolor = "#008B8B";
}
}
this.style.backgroundcolor = "rot";
Gel ("Inhalt"). Innerhtml = arr [this.id] .Content;
};
}
};
</script>
</head>
<body>
<div id = "contanier">
<ul id = "tabnavi"> </ul>
<div id = "content"> </div>
</div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.