js und jquery, um einen Tab-Statusleisten-Umschalteffekt zu erzielen
|
Heute werden wir einen einfachen Fall durchgehen und den Zweck des Umschaltens durch Klicken auf die Registerkartenleiste mithilfe von js und jquery erreichen. Der Effekt ist wie folgt:
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Statusleistenschalter</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
.hauptsächlich {
Breite: 720px;
Anzeige: Block;
Rand: 50px automatisch;
}
.Tabellentitel {
Breite: 100 %;
Höhe: 100%;
Rand: 1px tief schwarz;
}
.Tabellentitel ul {
Listenstil: keiner;
Anzeige: Flex;
}
.Tabellentitel li {
Breite: 25 %;
Höhe: 100%;
Hintergrundfarbe: Gainsboro;
Textausrichtung: zentriert;
Rahmen rechts: 1px tief schwarz;
Cursor: Zeiger;
}
.Tabellentitel li:letztes-Kind {
Rand rechts: keiner;
}
.Tabellentitel li Bezeichnung {
Textausrichtung: zentriert;
Cursor: Zeiger;
}
.tab-box .tab-show {
Anzeige: keine;
Rand: 1px tief schwarz;
oberer Rand: keiner;
Textausrichtung: zentriert;
}
/* Zeige das erste Bild an */
.tab-box .tab-show:erstes-Kind {
Anzeige: Block;
}
.ändern {
Deckkraft: 0,7;
}
</Stil>
<script src="js/jquery-3.5.1.js"></script>
<Skript>
// js implementiert window.onload = function() {
//Elemente abrufen var allLi = document.getElementsByTagName("li");
var Boxen = document.getElementsByClassName("tab-box")[0].children;
//Durchquerung um den Umschalteffekt zu erzielen for (var i = 0; i < allLi.length; i++) {
//Definieren Sie für jedes li einen Attributindexwert allLi[i].index = i;
//Klick-Ereignis hinzufügen allLi[i].onclick = function() {
//Indexwert abrufen var index = this.index;
//Inhaltsboxen anzeigen[index].style.display="block";
alleLi[index].style.opacity=0.7;
für (var j = 0; j < allLi.length; j++) {
//Ändere den Stil des Geschwisterelements zurück if(j != index){
Boxen[j].style.display="keine";
alleLi[j].style.opacity=1;
}
}
}
}
}
// jQuery implementiert $().ready(function() {
$(".table-title li").klick(function() {
//Erhalte den Elementindex über die Methode .index(), beginnend bei 0, und weise ihn einer Variablen zu var _index = $(this).index();
// Das _indexte Inhaltsfeld anzeigen und die anderen ausblenden $(".tab-box>div").eq(_index).show().siblings().hide();
//Ändern Sie den Stil des Optionsfelds, wenn es ausgewählt ist, und entfernen Sie die Stile mehrerer anderer Optionen$(this).addClass("change").siblings().removeClass("change");
});
});
</Skript>
</Kopf>
<Text>
<div Klasse="Haupt">
<div Klasse="Tabellentitel">
<ul>
<li><label>Mobiltelefon digital</label></li>
<li><label>Computerarbeit</label></li>
<li><label>Alltagsbedarf</label></li>
<li><label>Ein Muss für Zuhause</label></li>
</ul>
</div>
<div Klasse = "tab-box" Stil = "Breite: 100 %; Höhe: calc (100 %-40px);">
<div Klasse="tab-show">
Handy digital
<div Klasse="tab-show">
Computerbüro</div>
<div Klasse="tab-show">
Täglicher Bedarf
<div Klasse="tab-show">
Wichtige Dinge für den Haushalt</div>
</div>
</div>
</body>
</html>Wenn Sie mehr erfahren möchten, können Sie auf zwei wunderbare Themen klicken: Zusammenfassung der JavaScript-Tabulatoroperationsmethoden Zusammenfassung der jQuery-Tabulatoroperationsmethoden 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:
|
<<: Detaillierte Erläuterung spezieller Phänomene, Beispiele für die Sleep-Funktion in MySQL
>>: Tutorial zum Erstellen eines SVN-Servers mit Docker
Artikel empfehlen
Die Verwendung von Textbereichen in HTML und häufige Probleme und Fallanalyse
Der Textarea-Tag ist ein HTML-Tag, den wir häufig ...
Einführung in die Verwendung benutzerdefinierter Datenattribute in HTML- und Plug-In-Anwendungen
Sie werden oft HTML mit Datenattributen sehen. Die...
Detaillierte Erläuterung der kostenlosen AWS-Serveranwendung und des Tutorials zur Einrichtung eines Netzwerkproxys
Inhaltsverzeichnis Vorsichtsmaßnahmen Notwendige ...
So löschen Sie Standardformate und legen allgemeine Formate in CSS fest
CSS Standard-Stile löschen Die üblichen klaren St...
Analyse des Docker-Image-Erstellungsprinzips (Sie können ein Image erstellen, ohne Docker zu installieren)
Das Erstellen eines Images ist ein sehr wichtiger...
Zusammenfassung einiger meiner häufig verwendeten Linux-Befehle
Ich habe zwei Jahre lang im Betrieb und in der Wa...
Detaillierte Erläuterung der Schreibreihenfolge und Ausführungsreihenfolge von SQL-Abfrageanweisungen der MySQL-Reihe
Inhaltsverzeichnis 1. Die Schreibreihenfolge eine...
Allgemeine Tags in XHTML
Was sind XHTML-Tags? XHTML-Tag-Elemente sind die ...
Implementierung der CSS-Rahmenlängensteuerungsfunktion
Wenn die Rahmenlänge früher kleiner als der Conta...
Mysql NULL verursachte die Grube
Verwenden von NULL in Vergleichsoperatoren mysql&...
Lassen Sie uns über das v-on-Parameterproblem in Vue sprechen
Verwendung von v-on:clock in Vue Ich lerne derzei...
Warum TypeScripts Enum problematisch ist
Inhaltsverzeichnis Was ist passiert? Verwendung S...
Die Prinzipien und Mängel der MySQL-Volltextindizierung
Der MySQL-Volltextindex ist ein spezieller Index,...
Beschreiben Sie kurz den Unterschied zwischen MySQL und Oracle
1. Oracle ist eine große Datenbank, während MySQL...
Ein ausführliches Tutorial zur Installation von Jenkins auf Docker für Anfänger
Jenkins ist ein Open-Source-Softwareprojekt. Es h...