Implementieren Sie die Registerkarte "Anwendung der Registerkarte", dieses Plugin ist relativ einfach
Quellcode -Datei:
tab.js
Implementierungsprinzip
1. Wenn Sie auf ein Element klicken, müssen Sie zunächst das ursprünglich hervorgehobene Element abbrechen.
2. Markieren Sie dann das geklickte Element
3. Wenn das Klicken auf ein Element im Dropdown-Feld eine Option ist, wählen Sie sich selbst und wählen Sie auch das Dropdown-Feld.
5. Wenn die Animation definiert ist, führen Sie zuerst die Animation aus und dann Rückruf
Quellcodeanalyse:
1. Die Show -Methode wird ausgelöst, wenn ein Element geklickt wird, wodurch die folgenden vier Ereignisse ausgelöst werden.
1.1. HIDEN.BS.TAB: Verstecken Sie das vorherige Element
1.2. Show.bs.tab: Zeigen Sie das aktuelle Element an
1.3. Hideen.bs.tab: Fertig, indem das vorherige Element versteckt ist
1.4. Gezeigt.bs.tab: Zeigen Sie das aktuelle Element vollständig an
1.5. HIDEN/SHOW Event Quellcode:
var $ vorher = $ ul.find ('. Active: Last a') var hideEvent = $ .event ('hide.bs.tab', {relatedTarget: $ this [0]}) var showEvent = $ .event ('show.bs.tab', {relatedTarget: $ vorher [0]})2. Aktiv: Aktivieren Sie das aktuelle Objekt
2.1. Fügen Sie dem Navigationselement das Attribut für das Aria-expandierte Attribut hinzu, um zu markieren, ob sich dieses Element im erweiterten Zustand befindet
2.2. Verwenden Sie den Reflow -Mechanismus mit dem Offsetwidth -Attribut, um teilweise Neulackierung zu erreichen
Die obige kurze Diskussion auf der Registerkarte "Bootstrap Quellcode Analyse) (Registerkarte) ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.