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
Anwendungsbeispiele für die virtuelle Liste des WeChat-Applets
Inhaltsverzeichnis Vorwort Was ist eine virtuelle...
So verwenden Sie die Positionierung, um Elemente zu zentrieren (Tipps zum Webseiten-Layout)
So zentrieren Sie ein Element im Browserfenster H...
Detaillierte Erklärung der MySQL-Binlog-Verwendung
binlog ist eine binäre Protokolldatei, die alle D...
Detaillierter Prozess zum Konfigurieren eines HTTPS-Zertifikats unter Nginx
1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...
Schritte zum Erstellen eines CentOS-Containers über Docker
Inhaltsverzeichnis Vorwort Erstellen Sie ein Brüc...
Analyse von Problemen, die durch die Groß-/Kleinschreibung von MySQL verursacht werden
MySQL unterscheidet zwischen Groß- und Kleinschre...
Nginx-Anti-Crawler-Strategie, um UA am Crawlen von Websites zu hindern
Anti-Crawler-Richtliniendatei hinzugefügt: vim /u...
Zusammenfassung des Tutorials zur Installation und Bereitstellung von KVM für die VMware-Virtualisierung
Virtualisierung 1. Umwelt Centos7.3 Deaktivieren ...
Best Practices zum Teilen von React-Code
Wenn ein Projekt eine gewisse Komplexität erreich...
Detaillierte Erläuterung der Verwendung von MySQL sql_mode
Inhaltsverzeichnis Vorwort sql_mode erklärt Die w...
Detaillierte Beschreibung der HTML-Tabellenrahmensteuerung
Nur den oberen Rand anzeigen <table frame=above...
Ein Artikel zum Verständnis des Ausführungsprozesses von MySQL-Abfrageanweisungen
Vorwort Wir müssen bestimmte Daten abrufen, die d...
Semantik, Schreiben und bewährte Methoden für Link A
Die Semantik, der Schreibstil und die Best Practi...
Zwei Möglichkeiten, Vue-Benutzer dazu zu bringen, sich über einen längeren Zeitraum ohne Bedienung von der Anmeldeseite abzumelden
Inhaltsverzeichnis Problembeschreibung Frontend-S...
Erläuterung der Installation und Konfiguration zum Erstellen einer Go-Umgebung unter Linux
Es ist sehr einfach, eine Go-Umgebung unter Linux...