JS Tab (tab.js)
Tab her bölmesinde aynı anda görülebilir biri burada farklı bölmeleri içine içerik ayırmak için kullanılır.
Sekmeler hakkında bir eğitim için bizim okuma Bootstrap Tabs/Pills Eğitimi .
Sekme Eklentisi Sınıflar
| Sınıf | Açıklama | Örnek |
|---|---|---|
| .nav nav-tabs | Navigasyon sekmeleri oluşturur | Dene |
| .nav-justified | Navigasyon yapar tabs/pills geniş 768px daha ekranları olan ana eşit genişlikleri. Küçük ekranlarda nav tırnakları istiflendiği | Dene |
| .tab-content | Birlikte .tab-pane ve data-toggle="tab" , sekme toggable yapar | Dene |
| .tab-pane | Birlikte ile .tab-content ve data-toggle="tab" , bu sekme toggable yapar | Dene |
Via data-* Özellikler
Ekle data-toggle="tab" Her sekmesine ve eklemek .tab-pane her sekme için benzersiz bir kimlik sınıf ve bir sarılmasıdır .tab-content sınıfına.
Örnek
<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>
Kendin dene " JavaScript aracılığıyla
el ile etkinleştirme:
Örnek
// 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')
Kendin dene " Sekme Seçenekleri
| Yok |
Sekme Yöntemleri
Aşağıdaki tabloda mevcut tüm sekme yöntemlerini listeler.
| Yöntem | Açıklama | Dene |
|---|---|---|
| . tab("show") | sekmesini gösterir | Dene |
Sekme Olaylar
Aşağıdaki tabloda mevcut tüm sekme olaylarını listeler.
| Olay | Açıklama | Dene |
|---|---|---|
| show.bs.tab | sekme gösterilir üzereyken gerçekleşir. | Dene |
| shown.bs.tab | sekme tamamen gösterildiğinde gerçekleşir (CSS geçişleri tamamladıktan sonra) | Dene |
| hide.bs.tab | sekme gizli üzeredir oluşur | Dene |
| hidden.bs.tab | sekme tamamen gizlidir oluşur (CSS geçişleri tamamladıktan sonra) | Dene |
İpucu: jQuery'nin kullanın event.target ve event.relatedTarget aktif sekmeyi Önceki etkin sekmeyi almak için:
Örnek
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text();
// active tab
var y = $(event.relatedTarget).text();
// previous tab
}); Kendin dene "