jQuery implementiert gleitende Registerkarte
|
In diesem Artikelbeispiel wird der spezifische Code von jQuery zur Implementierung von Schieberegisterkarten zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Zunächst der Endeffekt:
Bedarfsanalyse: 1. Die Anzahl der Registerkartenmenüs ist nicht festgelegt und der Menüinhalt ist nicht festgelegt, was zu unbekannten Breiten der einzelnen Menüs und der Gesamtbreite führt. Die Notwendigkeit eines Schiebereglers bedeutet, dass die HTML-Struktur des Schiebereglers und des Menüs getrennt werden muss und die jQuery-Offset-Methode zum Abrufen und Festlegen der Position verwendet wird und alle Divs die relative Positionierung verwenden. Die Registerkarte TAB lässt sich in diesem Fall problemlos erweitern und wiederverwenden. Sie müssen nur einige Werte ändern, um sie direkt verwenden zu können.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<Titel>0908</Titel>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<Stil>
/*Der Container dient nur zur horizontalen Zentrierung. Wenn er nicht benötigt wird, können Sie diese Verschachtelungsebene entfernen*/
.Container{
links: 50%;
Rand oben: 100px;
schweben: links;
Cursor:Zeiger;
Position: relativ;
}
.BG{
rechts: 50%;
Schriftgröße: 0;
Hintergrundfarbe: #f2f2f2;
Rahmenradius: 30px;
Position: relativ;
}
.container div{
Schriftgröße: 16px;
Zeilenhöhe: 60px;
}
.Liste{
schweben: links;
Anzeige: Inline-Block;
Polsterung: 0 50px;
Übergang: Farbe 0,5 s;
Position: relativ;
Z-Index: 1;
}
/*Die Reihenfolge von listH und listA kann hier nicht geändert werden, es gibt eine Priorität, wenn listA verwendet wird, funktioniert listH nicht*/
.listH{
Farbe: #ff8300;
}
.listA{
Farbe: #fff;
}
/*Schieberegler*/
#aktiv{
Breite: 100px;
Höhe: 60px;
Rahmenradius: 30px;
Hintergrundfarbe: #ff8300;
Kastenschatten: 0 5px 16px 0 rgba (255, 144, 0, 0,58);
Position: relativ;
Z-Index: 0;
Übergang: links 0,5 s, Breite 1 s;
}
</Stil>
<Skript>
$(Dokument).bereit(Funktion () {
/*Standardmäßig aktiven Tab festlegen eq(i)*/
var aL = $(".list:eq(1)");
$("#active").width(aL.innerWidth());
$("#aktiv").offset(aL.offset());
aL.addClass("ListeA");
/*Fügen Sie jedem Button Klickereignisse hinzu*/
$(".list").klick(function() {
$("#active").width($(this).innerWidth()); //Breite festlegen$("#active").offset($(this).offset()); //Position festlegen$(this).addClass("listA");
$(".list").nicht(diese).removeClass("listA");
});
/*Hover-Effekt*/
$(".Liste").hover(Funktion () {
$(diese).addClass("listH")
},Funktion () {
$(diese).removeClass("listH")
})
});
</Skript>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="BG">
<div class="list">eine</div>
<div class="list">zweizwei</div>
<div class="list">dreidreidrei</div>
<div class="list">vier</div>
<div class="list">fünffünffünf</div>
<div id="aktiv"></div>
</div>
</div>
</body>
</html>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:
|
<<: Ursachen und Lösungen für langsame MySQL-Abfragen
>>: So verwenden Sie den Linux-Befehl „basename“
Artikel empfehlen
Implementierung des Docker View Container Log-Befehls
Warum sollten wir das Protokoll lesen? Wenn beisp...
Zusammenfassung der genauen Berechnungen verschiedener Abstände/Scrolldistanzen in einem Fenster
Normalerweise müssen wir uns bei der Projektentwic...
Tipps zur HTML-Formatierung und langen Dateien für das Webdesign
<br />Verwandte Artikel: 9 praktische Vorsch...
So verwenden Sie CSS-Zähler, um geordnete Zahlenlisten zu verschönern
Beim Webdesign ist es sehr wichtig, eine organisi...
Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)
Das CSS-Positionsattribut gibt den Positionierung...
So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven
Wir alle kennen die Drag-and-Drop-Funktion von HT...
Konstruktions- und Nutzungsprozess des Vue3.0-Projekts
Inhaltsverzeichnis 1. Projektkonstruktion 2: Verz...
Mehrere Gründe, HTML nicht zu komprimieren
Der Grund ist einfach: In HTML-Dokumenten entsprec...
JavaScript implementiert einfache Rechnerfunktion
In diesem Artikel wird der spezifische JavaScript...
So konfigurieren Sie die PDFLatex-Umgebung in Docker
Technischer Hintergrund Latex ist ein unverzichtb...
Detaillierte Erklärung zum Erstellen einer aktualisierbaren Ansicht in MySQL
Dieser Artikel beschreibt anhand eines Beispiels,...
Fehlereinfügungsanalyse der Funktion „updatexml()“ von MySQL
Verstehen Sie zunächst die Funktion updatexml() U...
Linux verwendet lsof/extundelete-Tools, um versehentlich gelöschte Dateien oder Verzeichnisse wiederherzustellen
Vorwort Linux verfügt nicht über einen prominente...
Next.js – Erste Schritte-Tutorial
Inhaltsverzeichnis Einführung Erstellen eines Nex...
MySQL Serie 3 Grundlagen
Inhaltsverzeichnis Tutorial-Reihe 1. Einführung i...