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
MySQL Online-Übung zur Deadlock-Analyse
Vorwort Ich glaube, dass jeder beim Erlernen von ...
Drei gängige Methoden, um HTML-Seiten nach 3 Sekunden automatisch zu springen
In der Praxis stoßen wir häufig auf ein Problem: ...
MySQL MSI Installations-Tutorial unter Windows 10 mit Bildern und Text
1. Herunterladen 1. Klicken Sie auf den neuesten ...
Unterscheidung zwischen Linux-Hardlinks und Softlinks
Unter Linux gibt es zwei Arten von Dateiverbindun...
Lösen Sie das Problem „Rand: oberer Kollaps“ in CCS
Die HTML-Struktur ist wie folgt: Die CCS-Struktur...
Div in HTML ausblenden Tabelle ausblenden TABLE- oder DIV-Inhalt im CSS-Stil
Ich habe heute Abend ein Problem gelöst, das mich...
Anwendungsbeispiele für die MySQL-Volltextsuche
Inhaltsverzeichnis 1. Umweltvorbereitung 2. Daten...
Detaillierte Erläuterung der Nginx-Strombegrenzungskonfiguration
Dieser Artikel erläutert anhand von Beispielen di...
Idea stellt Remote-Docker bereit und konfiguriert die Datei
1. Ändern Sie die Docker-Konfigurationsdatei des ...
Erläuterung unveränderlicher Werte in React
Inhaltsverzeichnis Was sind unveränderliche Werte...
Tomcat verstümmelte Zeichen in der Konsole in IDEA und wie man die IDEA-Kodierung auf UTF-8 einstellt
1. Zunächst müssen wir zwischen der Tomcat-Protok...
Hinweise zum Proc-Dateisystem des Linux-Kernel-Gerätetreibers
/***************** * proc-Dateisystem************...
CentOS-System-RPM-Installation und -Konfiguration von Nginx
Inhaltsverzeichnis CentOS RPM-Installation und Ko...
So legen Sie das Breitenattribut auf den Stil des Span-Tags fest
Wenn Sie das Breitenattribut direkt auf den Stil d...
Installationsprozess des mysql5.6.8-Quellcodes
Kernel: [root@opop ~]# cat /etc/centos-release Ce...