JavaScript, um den Effekt des Tab-Leistenwechsels zu erzielen
|
Registerkartenleiste: Klicken Sie auf verschiedene Registerkarten, um unterschiedliche Inhalte anzuzeigen. Der Stil der angeklickten Registerkarte ändert sich (die ausgewählte Registerkarte wird hervorgehoben). Umsetzungsideen:1. Teilen Sie die Registerkartenleiste in zwei Teile, der obere Teil ist die Navigationsliste und der untere Teil ist der entsprechende Inhalt jedes Teils. Schreiben Sie die Tags und den Inhalt. Schreiben Sie den Inhalt in der Reihenfolge der Tags. Fügen Sie jedem Tag ein benutzerdefiniertes Attribut - - -index hinzu. Der Attributwert beginnt bei 0 und erhöht sich um 1. 2. Realisieren Sie zunächst den obigen Effekt. Nach dem Klicken wechselt der Stil und die Schriftfarbe und Hintergrundfarbe des angeklickten Textes ändern sich usw.: ①css definiert eine Klasse, z. B.: current, die den geänderten Stil definiert. Schreiben Sie zuerst einen Klassennamen für das erste Tag und schreiben Sie keine Klassennamen für die anderen. 3. Wenn Sie Folgendes implementieren, wird je nach angeklickter Beschriftung ein anderer Inhalt angezeigt: ①CSS zeigt den Inhalt an, der dem ersten Tag entspricht, und verbirgt die anderen:
.box-tb .item:n-tes-Kind(n+2) {
Anzeige: keine;
}② Holen Sie sich alle Elementobjekte des Inhalts, holen Sie sich den Indexwert des Tags und fügen Sie im Klickereignis einen exklusiven Gedankencode hinzu - - - for-Schleife - - - Durchlaufen Sie die Elementobjekte des Inhalts, legen Sie den gesamten Inhalt auf Ausblenden fest - - - items[i].style.display = 'none'; zeigen Sie dann den entsprechenden Inhalt entsprechend dem angeklickten Tag an - - - items[index].style.display = 'block'; Codebeispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Tab-Leistenschalter</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
li {
Listenstil: keiner;
}
.Kasten {
Breite: 600px;
Rand: 100px automatisch;
}
.box-th {
Überlauf: versteckt;
Breite: 100 %;
Hintergrundfarbe: #88ace6;
}
.box-th ul li {
schweben: links;
Breite: 90px;
Höhe: 20px;
Rand rechts: 10px;
Polsterung: 5px;
Textausrichtung: zentriert;
}
.aktuell {
Farbe: #fff;
Hintergrundfarbe: grün;
}
.box-tb {
Rand oben: 20px;
}
.box-tb .item:n-tes-Kind(n+2) {
Anzeige: keine;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<div Klasse="box-th">
<ul>
<li data-index="0" class="current">Frühling</li>
<li data-index="1">Sommer</li>
<li data-index="2">Herbst</li>
<li data-index="3">Winter</li>
</ul>
</div>
<div Klasse="box-tb">
<div class="item">Der Frühling ist die erste der vier Jahreszeiten und von da an beginnt ein neuer Zyklus. Der Frühling steht für Wärme und Wachstum: Pflanzen sprießen, es weht warmer Wind und Sonnenschein, Vögel singen und Blumen blühen. Temperatur, Sonnenscheindauer und Niederschlagsmenge liegen in dieser Jahreszeit an einem Wendepunkt des Jahres und neigen dazu, anzusteigen oder zuzunehmen. Im Frühling beginnen sich die Yin- und Yang-Energien zu verwandeln, und alles sprießt und wächst, wenn die Yang-Energie steigt. Der Frühling ist die Jahreszeit des Wachstums und des Frühlingspflügens und der Frühlingssaat, denn wie das Sprichwort sagt: „Der Jahresplan beginnt im Frühling.“ Frühlingsanfang und Frühlingsende: Unterteilt nach den Veränderungen der astronomischen Phänomene: Traditionell beginnt der Frühling bei „Lichun“ (wenn der Große Wagen auf Yin zeigt und die Sonne den 315. Längengrad der Ekliptik erreicht) und endet bei „Lixia“. Einteilung basierend auf Temperaturänderungen: In der heutigen Zeit wird die Einteilung „paritätische Durchschnittstemperatur“ des Gelehrten Zhang Baokun übernommen. Der Frühling beginnt, wenn die paritätische Durchschnittstemperatur (der Durchschnitt der Temperatur an 5 aufeinanderfolgenden Tagen) stetig von unter 10 °C auf über 10 °C steigt, und endet, wenn die paritätische Durchschnittstemperatur über 22 °C liegt (Beginn des Sommers).
</div>
<div class="item">Der Sommer ist die Jahreszeit, in der alles blüht und die Nutzpflanzen ihren Höhepunkt erreichen. Die Temperaturen steigen, das Wetter ist heiß, es gibt häufig starke Winde und Regenstürme und alles wächst kräftig. Der Sommer ist die stürmischste Jahreszeit, oft begleitet von starkem Wind und heftigen Regenfällen. Im Sommer erwärmt sich der Kontinent auf der Nordhalbkugel und der Luftdruck steigt, sodass ein Tiefdruckgebiet entsteht, während die konstante Temperatur des Ozeans relativ niedrig ist und ein Hochdruckgebiet entsteht. Gemäß der Zirkulation weht der Wind im Sommer aus Südosten. Im Sommer sind die Tageslichtstunden auf der gesamten Nordhalbkugel am längsten. Sommeranfang und Sommerende: Unterteilt nach den Veränderungen der astronomischen Phänomene: „Lixia“ (der Große Wagen zeigt nach Südosten, die Sonne erreicht 45° der ekliptikalen Länge) ist der Beginn des Sommers und er endet bei „Liqiu“. Basierend auf Temperaturänderungen: Der Sommer beginnt, wenn die Durchschnittstemperatur der Jahreszeit stabil über 22 °C steigt und endet, wenn die Durchschnittstemperatur der Jahreszeit unter 22 °C fällt.
</div>
<div class="item">Der Herbst ist die Erntezeit, was bedeutet, dass alle Dinge beginnen, sich vom üppigen Wachstum zur verwelkten Reife zu bewegen. Die ersten beiden Sonnentage des Herbstes, Herbstanfang und Hitzeende, sind noch extrem heiß, da die von der Sonne gebrachte Hitze noch nicht nachgelassen hat. Die sogenannte „Hitze“ herrscht in den drei Hundstagen. Die drei Hundstage liegen zwischen der geringeren Hitze und dem Hitzeende und weisen die höchste Temperatur, Luftfeuchtigkeit und Hitze des Jahres auf. Der Grund für die hohe Luftfeuchtigkeit während der Hundstage liegt darin, dass während der Hundstage der Südostwind weht und Südosten der Pazifik und der Indische Ozean ist, die Luft feucht ist und der nasse Wind während der Hundstage für eine hohe Luftfeuchtigkeit sorgt; im Spätherbst ist das Gegenteil der Fall, dann weht der Nordwestwind und Nordwesten ist ein trockenes Binnenland und der trockene Nordwestwind sorgt im Spätherbst für ein trockenes Klima. Die Klimacharakteristik der ersten beiden Solarperioden im Herbst ist feucht und schwül. Die wirkliche Kühle im Herbst kommt meist erst nach der Solarperiode des Weißen Taus und von da an wird es allmählich kühler und trockener. Mit Beginn des Spätherbstes ändert sich das Klima von heiß zu kühl, und alles verdorrt allmählich, während die Kälte zunimmt. Dies ist die Jahreszeit des Wechsels zwischen Hitze und Kälte. Die auffälligste Veränderung im Herbst besteht darin, dass sich die Blätter der Gräser und Bäume von ihrem satten Grün zu Gelb verfärben und abzufallen beginnen, während gleichzeitig die Feldfrüchte zu reifen beginnen.
[1] Beginn und Ende des Herbstes: Der Herbst beginnt mit dem Herbstanfang (wenn der Große Wagen nach Südwesten zeigt und die Sonne 135° ekliptikaler Länge erreicht) und endet mit dem Winteranfang. Basierend auf Temperaturänderungen: Der Herbst beginnt, wenn die Durchschnittstemperatur der Jahreszeit stetig von über 22 °C auf unter 22 °C fällt, und endet, wenn die Durchschnittstemperatur der Jahreszeit unter 10 °C fällt.
</div>
<div class="item">Im Winter verwandeln sich Yin und Yang, alle Dinge werden nicht mehr eingelagert, sondern verborgen und die Pflanzen behalten ihre Vitalität. Mit dem Winteranfang geht das trockene und regnerische Herbstklima allmählich in ein regnerisches, kaltes und eisiges Winterklima über. Auf der Nordhalbkugel steht die Sonne tiefer und die Tageslichtstunden sind kürzer. Wie das Sprichwort sagt: „In den Hundstagen ist es heiß und an den kältesten Tagen kalt“. Die Wintersonnenwende sind die „ersten neun Tage“. Vor der Wintersonnenwende ist es nicht sehr kalt. Nach der Wintersonnenwende zieht häufig starke Kaltluft nach Süden und überquert die Nanling-Berge. Die Temperatur fällt stark und das Wetter wird kalt. Der Winter wird nach der Wintersonnenwende richtig kalt. Beginn und Ende des Winters: Basierend auf astronomischen Veränderungen: „Winteranfang“ (der Große Wagen zeigt nach Nordwesten, die Sonne erreicht 225° der ekliptikalen Länge) ist der Startpunkt des Winters und endet mit dem nächsten „Frühlingsanfang“. Basierend auf Temperaturänderungen: Der Winter beginnt, wenn die Durchschnittstemperatur der Jahreszeit stetig unter 10℃ fällt, und endet, wenn die Durchschnittstemperatur der Jahreszeit über 10℃ liegt.
</div>
</div>
</div>
<Skript>
var list = document.querySelector('.box-th').querySelectorAll('li');
var Elemente = document.querySelector('.box-tb').querySelectorAll('.item');
für (var i = 0; i < Liste.Länge; i++) {
Liste[i].onclick = Funktion() {
// Umschalten des Navigationsleistenstils, exklusiver Algorithmus für (var i = 0; i < list.length; i++) {
Liste[i].Klassenname = '';
}
dieser.Klassenname = "aktuell";
// Das Folgende zeigt den Inhaltswechsel, exklusiver Algorithmus var index = this.getAttribute('data-index');
für (var i = 0; i < Elemente.Länge; i++) {
Elemente[i].style.display = "keine";
}
Elemente[index].style.display = "Block";
}
}
</Skript>
</body>
</html>Seiteneffekt:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
>>: Detailliertes Tutorial zur Verwendung des Plugins tomcat8-maven-plugin in Maven
Artikel empfehlen
So installieren Sie Docker unter Windows 10 Home Edition
Ich habe Docker kürzlich verwendet, um ein Projek...
So überwachen Sie MySQL mit Zabbix
Dokumentation zur Zabbix-Bereitstellung Nach der ...
So ändern Sie das MySQL-Passwort unter Centos
1. MySQL-Anmeldeeinstellungen ändern: # vim /etc/...
Lassen Sie uns über den Unterschied zwischen MyISAM und InnoDB sprechen
Die Hauptunterschiede sind folgende: 1. MySQL ver...
Online-Webtools und -anwendungen, auf die Webentwickler und -designer nicht verzichten können
Sie erinnern sich vielleicht, dass wir in den ver...
Designreferenz Schönes und originelles Blog-Design
Alle unten aufgeführten Blogs sind originell und ...
Detailliertes Tutorial zum Ausführen mehrerer Springboot mit Docker
Docker führt mehrere Springboot Erstens: Port-Map...
Docker-Bereitstellungs- und Installationsschritte für Jenkins
Zuerst benötigen wir einen Server mit installiert...
Linux: Fünf-Schritte-Kernel-Build-Baum
Inhaltsverzeichnis 0. Der mit dem System geliefer...
JavaScript-Flusskontrolle (Verzweigung)
Inhaltsverzeichnis 1. Prozesskontrolle 2. Sequent...
Konfigurieren Sie ein Implementierungsbeispiel für den Mysql-Master-Slave-Dienst
Konfigurieren Sie ein Implementierungsbeispiel fü...
Tomcat analysiert XML und erstellt Objekte durch Reflektion
Der folgende Beispielcode stellt die Prinzipien d...
Detaillierte Erklärung des MySQL-Datenbank-LIKE-Operators in Python
Der LIKE-Operator wird in der WHERE-Klausel verwe...
Ein Beispiel zur Optimierung eines Projekts nach Abschluss des Vue-Projekts
Inhaltsverzeichnis 1. Geben Sie unterschiedliche ...
Detaillierte Erläuterung der grundlegenden Befehle der Firewalld-Firewall in Centos7
1. Grundlagen der Linux-Firewall Das Linux-Firewa...