Bootstrap JS Tab

JS Tab (tab.js)

Tabs are used to separate content into different panes where each pane is viewable one at a time.

For a tutorial about Tabs, read our Bootstrap Tabs/Pills Tutorial.


The Tab Plugin Classes

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 toggable
.tab-pane Together with .tab-content and data-toggle=”tab”, it makes the tab toggable

Via data-* Attributes

Add data-toggle="tab" to each tab, and add a .tab-pane class with a unique ID for every tab and wrap them in a.tab-content class.

Example

<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>

 


Via JavaScript

Enable manually with:

Example

// 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’)

 


Tab Options

None

Tab Methods

The following table lists all available tab methods.

Method Description
.tab(“show”) Shows the tab

Tab Events

The following table lists all available tab events.

Event Description
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)

Tip: Use jQuery’s event.target and event.relatedTarget to get the active tab and the previous active tab:

Example

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

Leave a Reply

Your email address will not be published. Required fields are marked *