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 eines einfachen Gobang-Spiels mit nativem JavaScript
In diesem Artikel finden Sie den spezifischen Cod...
Detaillierte Erläuterung der MySQL Master-Slave-Datenbankkonstruktionsmethode
Dieser Artikel beschreibt, wie man eine MySQL Mas...
MySQL Series 11-Protokollierung
Tutorial-Reihe MySQL-Reihe: Grundlegende Konzepte...
Vue-Routing - Methode zum Sprung relativer Pfade
Inhaltsverzeichnis Relativer Pfadsprung im Vue-Ro...
Vue-CLI3.x stellt Projekte automatisch auf dem Server bereit
Inhaltsverzeichnis Vorwort 1. Installieren Sie sc...
Detaillierte Erläuterung des Prinzips und der Praxis der MySQL-Master-Slave-Replikation
Inhaltsverzeichnis Einführung Wirkung Prinzip bil...
Zusammenfassung des Betriebs und der Wartung von Linux von grundlegenden bis zu fortgeschrittenen Wissenspunkten
Die Arbeit als Betriebs- und Wartungsingenieur is...
So stellen Sie Dienste in Windows Server 2016 bereit (Grafisches Tutorial)
Einführung Wenn eine große Anzahl an Systemen ins...
Detaillierte Beispiele zur Verwendung der JavaScript-Ereignisdelegierung (Proxy)
Inhaltsverzeichnis Einführung Beispiel: Ereignisd...
Grundlegendes Lernprogramm zum Tabellen-Tag in HTML
Zusammensetzung der Tabellenbeschriftung Die Tabe...
Eine kurze Diskussion über Browserkompatibilitätsprobleme in JavaScript
Die Browserkompatibilität ist der wichtigste Teil...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18
In diesem Artikel wird das grafische Tutorial zur...
Vue-Komponente zur Realisierung einer Karussell-Animation
In diesem Artikelbeispiel wird der spezifische Co...
Berechnungstabelle für die RGBA-Alpha-Transparenzkonvertierung
Konvertierung zwischen RGBA- und Filterwerten unt...
Vier Möglichkeiten zum Ändern des Standard-CSS-Stils von Element-UI-Komponenten in Vue
Inhaltsverzeichnis Vorwort 1. Verwenden Sie eine ...