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
JavaScript implementiert einfache Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Ja...
Beispielcode zur Implementierung einer Anmelde- und Registrierungsvorlage in Vue
Vorlage 1: anmelden.vue <Vorlage> <p Kla...
Eine kurze Diskussion über die Implementierung der MySQL-Lösung zur Optimierung des Seitenlimits
MySQL begrenzt die Nutzung von Paging-Anweisungen...
So stellen Sie mit Navicat Premium eine Remoteverbindung zur MySQL-Datenbank her
Derjenige, der eine neue Verbindung herstellt, en...
Umfassende Inventarisierung wichtiger Logdateien in MySQL
Inhaltsverzeichnis Einführung Protokollklassifizi...
Detaillierte Erläuterung des Svelte-Implementierungsprinzips für eine einfache und unkomplizierte JavaScript-Entwicklung
Inhaltsverzeichnis Demo1 Fragment erstellen Svelt...
React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen
Ein sehr häufiges Szenario in react -Projekten: c...
So fügen Sie Vite-Unterstützung zu alten Vue-Projekten hinzu
1. Einleitung Ich habe vor zwei Jahren ein Projek...
MySQL implementiert Protokollverwaltung, Sicherung und Wiederherstellung auf Unternehmensebene – praktisches Tutorial
Hintergrund Mit der Entwicklung des Geschäfts exp...
React implementiert das Hinzufügen, Löschen, Ändern und Abfragen von Todolists
Inhaltsverzeichnis Nehmen Sie Todolist als Beispi...
Zusammenfassung der Wissenspunkte zum Abdecken von Indizes in MySQL
Wenn ein Index die Werte aller abzufragenden Feld...
Verwenden Sie CSS, um die Breite von INPUT in TD festzulegen
Als ich kürzlich mit C# ein Webprogramm erstellte,...
MySQL-Update-Fall Update-Feldwert ist keine feste Operation
Wenn bei der Verarbeitung von Batch-Updates besti...
Beispiele für minimalistisches Website-Design
Webanwendungsklasse 1. DownFürAlleOderNurIch Mith...
Beispielcode zur einfachen Implementierung des Seitenlayouts mit Flex-Layout
Kommen wir ohne weitere Umschweife direkt zum Cod...