बूटस्ट्रैप जे एस टैब
जेएस टैब (टैब.जेएस)
टैब का उपयोग सामग्री को अलग-अलग पैन में अलग करने के लिए किया जाता है जहां प्रत्येक फलक एक समय में एक देखा जा सकता है।
Tabs के बारे में एक ट्यूटोरियल के लिए, हमारे Bootstrap Tabs/Pills Tutorial को पढ़ें ।
टैब प्लगइन क्लासेस
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | |
| .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कक्षा में लपेटें।
उदाहरण
<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>
जावास्क्रिप्ट के माध्यम से
इसके साथ मैन्युअल रूप से सक्षम करें:
उदाहरण
// 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
});