Registerkarte (Registerkarte) durch Kombination einiger Dateneigenschaften können Sie problemlos eine Registerkartenschnittstelle erstellen.
"Wenn Sie auf die Funktionalität des Plugins separat verweisen möchten, müssen Sie die Registerkarte verweisen.
1. Nutzung
Sie können TAB -Seiten auf zwei Arten aktivieren:
Nach Dateneigenschaft: Sie müssen dem Ankertext-Link Data-Toggle = "Tab" oder Data-Toggle = "Pill" hinzufügen.
Durch das Hinzufügen von Nav- und Nav-Tabs-Klassen in UL wird der Bootstrap-Tag-Stil angewendet und das Hinzufügen von Nav- und Nav-Pills-Klassen in UL den Bootstrap-Kapselstil angewendet.
<ul> <li> <a href = "#identifier" data-toggle = "tab"> home </a> </li> ... </ul>
Über JavaScript: Sie können JavaScript verwenden, um Registerkarten wie folgt zu aktivieren:
$ ('#mytab a'). click (function (e) {e.preventDefault () $ (this) .tab ('show')})Das folgende Beispiel zeigt die Aktivierung einzelner Registerkarten auf unterschiedliche Weise:
// Wählen Sie die Registerkarte Seite $ ('#mytab a [href = "#profil"]'). Tab ('show') // Wählen Sie die erste Registerkarte $ ('#mytab a: First'). Tab ('show') // Wählen a '). Tab (' Show ')2. Fade -Effekt
Wenn Sie einen Fade-Effekt für die Registerkarte festlegen müssen, fügen Sie. FADE zu jeder .tab-Schleife hinzu. Die erste Registerkarte muss mit einer .in -Klasse hinzugefügt werden, um den Anfangsinhalt anzuzeigen, wie im folgenden Beispiel gezeigt:
<div> <div id = "home"> ... </div> <div id = "svn"> ... </div> <div id = "ios"> ... </div> <div id = "java"> ... </div> </div>
3. Methode
. Auf der Registerkarte muss ein Daten-Ziel oder ein HREF auf den Containerknoten im DOM zeigen.
<ul id = "mytab"> <li> <a href = "#identifier" data-toggle = "tab"> home </a> </li> ..... </ul> <div> <div id = "home"> ... </div> .... </div> <script> $ () () {$ ('#myTab a: letztes').Iv. Ereignisse
In der folgenden Tabelle werden die Ereignisse aufgeführt, die im Registerkarte (Registerkarte) verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
5. Grundlegende Beispiele
1. Tags
Registerkartenseiten sind allgemein als Registerkartenfunktionen bekannt.
//Basic Usage <ul> <li> <a href="#html5" data-toggle="tab">HTML5</a> </li> <li> <a href="#bootstrap" data-toggle="tab">Bootstrap</a> </li> <li> <a href="#jquery" data-toggle="tab">jQuery</a> </li> <li> <a href = "#extjs" data-toggle = "tab"> extjs </a> </li> </ul> <div style = "padding: 10px; </div> </div>
// Der Fade-Effekt kann festgelegt werden, und in zeigt an, dass der bevorzugte Inhalt standardmäßig <div id = "html5"> // angezeigt wird
Die Bindung oder nicht die Bindungseffekt ist mit dem Datenziel der gleiche
// JavaScript verwenden und direkt die Tab -Methode verwenden. $ ('#nav a'). on ('click', function (e) {e.preventDefault (); $ (this) .tab ('show');}); // Ereignisse, andere Ähnlichkeiten $ ('#nav a'). On ('show.bs.tab', function () {alert ('kostenlos beim Aufrufen von Registerkarten!');}); $ ('#nav a'). on ('teamd.bs.tab', function () {alert ('frei, wenn die Registerkarte angezeigt wird!');});Diese Reihe von Tutorials wurde zusammengestellt in: Bootstrap -Tutorials für besondere Themen, Willkommen, um zu lernen.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Tutorial für Bootstrap -Tischnutzung
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.