बूटस्ट्रैप जे एस टैब
टैब सीएसएस क्लासेस
टैब का उपयोग सामग्री को अलग-अलग पैन में अलग करने के लिए किया जाता है जहां प्रत्येक फलक एक समय में एक देखा जा सकता है।
Tabs के बारे में एक ट्यूटोरियल के लिए, हमारे Bootstrap Tabs/Pills Tutorial को पढ़ें ।
| Class | Description | Example |
|---|---|---|
.nav nav-tabs |
Creates navigation tabs | |
.nav nav-pills |
Creates navigation pills | |
.nav-item |
Creates tab items | |
.nav-link |
Styles links inside the navigation tab | |
.nav-justified |
Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked | |
.tab-content |
Together with .tab-pane and data-toggle="tab", it makes the tab toggleable | |
.tab-pane |
Together with .tab-content and data-toggle="tab", it makes the tab toggleable |
डेटा के माध्यम से-* विशेषताएँ
प्रत्येक टैब में जोड़ें data-toggle="tab", और प्रत्येक टैब .tab-paneके लिए एक अद्वितीय आईडी वाली कक्षा जोड़ें और उन्हें .tab-contentकक्षा में लपेटें।
उदाहरण
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active container"
id="home">...</div>
<div class="tab-pane container"
id="menu1">...</div>
<div class="tab-pane container"
id="menu2">...</div>
</div>
जावास्क्रिप्ट के माध्यम से
इसके साथ मैन्युअल रूप से सक्षम करें:
उदाहरण
// 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')
टैब विकल्प
| None |
टैब तरीके
निम्न तालिका सभी उपलब्ध टैब विधियों को सूचीबद्ध करती है।
| Method | Description | Try it |
|---|---|---|
| .tab("show") | Shows the tab |
टैब इवेंट
निम्न तालिका सभी उपलब्ध टैब ईवेंट को सूचीबद्ध करती है।
| Event | Description | Try it |
|---|---|---|
| show.bs.tab | Occurs when the tab is about to be shown. | |
| shown.bs.tab | Occurs when the tab is fully shown (after CSS transitions have completed) | |
| hide.bs.tab | Occurs when the tab is about to be hidden | |
| hidden.bs.tab | Occurs when the tab is fully hidden (after CSS transitions have completed) |
युक्ति: सक्रिय टैब और पिछला सक्रिय टैब प्राप्त करने के लिए jQuery के event.target और event .संबंधितTarget का उपयोग करें:
उदाहरण
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});