Neueste Web-Entwicklung Tutorials
 

Bootstrap JS Tab


JS Tab (tab.js)

Tabs werden verwendet, um Inhalte in verschiedene Scheiben zu trennen, wobei jede Scheibe sichtbar ein zu einer Zeit ist.

Ein Tutorial über Tabs, unsere lesen Bootstrap Tabs/Pills Tutorial .


Die Tab-Plugin Klassen

Klasse Beschreibung Beispiel
.nav nav-tabs Erzeugt Navigations-Registerkarten Versuch es
.nav-justified Macht die Navigation tabs/pills gleiche Breiten ihrer Eltern, auf Bildschirmen breiter als 768px. Auf kleineren Bildschirmen werden die nav Registerkarten gestapelt Versuch es
.tab-content Zusammen mit .tab-pane und data-toggle="tab" , macht es die Registerkarte toggable Versuch es
.tab-pane Zusammen mit .tab-content und data-toggle="tab" , macht es die Registerkarte toggable Versuch es

Via data-* Attribute

In data-toggle="tab" auf den Registerkarten und fügen Sie eine .tab-pane für jeden Reiter Klasse mit einer eindeutigen ID und wickeln Sie sie in einem .tab-content - Klasse.

Beispiel

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>
Versuch es selber "

Via JavaScript

Aktivieren Sie manuell mit:

Beispiel

// Select all tabs
$('.nav-tabs a').click(function(){
    $(this).tab('show');
})

// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')

// Select first tab
$('.nav-tabs a:first').tab('show')

// Select last tab
$('.nav-tabs a:last').tab('show')

// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
Versuch es selber "

Optionen auf der Registerkarte

None

Tab Methoden

Die folgende Tabelle listet alle verfügbaren Register Methoden.

Methode Beschreibung Versuch es
.tab("show") Zeigt die Registerkarte Versuch es

Tab Events

Die folgende Tabelle listet alle verfügbaren Register Ereignisse.

Event Beschreibung Versuch es
show.bs.tab Tritt ein, wenn die Lasche über angezeigt werden soll. Versuch es
shown.bs.tab Tritt ein, wenn die Lasche vollständig angezeigt wird (nach dem CSS-Übergänge abgeschlossen haben) Versuch es
hide.bs.tab Tritt ein, wenn die Lasche über ausgeblendet wird Versuch es
hidden.bs.tab Tritt ein, wenn die Lasche vollständig verborgen ist (nachdem CSS-Übergänge abgeschlossen haben) Versuch es

Tipp: Verwenden Sie jQuery event.target und event.relatedTarget der aktiven Tab zu erhalten und die vorherige aktive Registerkarte:

Beispiel

$('.nav-tabs a').on('shown.bs.tab', function(event){
    var x = $(event.target).text();         // active tab
    var y = $(event.relatedTarget).text();  // previous tab
});
Versuch es selber "