HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Tabs are used to separate content into different panes where each pane is viewable one at a time
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.
Class | Description | Example |
---|---|---|
.nav nav-tabs | Creates navigation tabs | Try it |
.nav-justified | Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked | Try it |
.tab-content | Together with .tab-pane and data-toggle="tab", it makes the tab toggleable | Try it |
.tab-pane | Together with .tab-content and data-toggle="tab", it makes the tab toggleable | Try it |
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.
<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>
Enable manually with:
// 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 |
The following table lists all available tab methods.
Method | Description | Try it |
---|---|---|
.tab("show") | Shows the tab | Try it |
The following table lists all available tab events.
Event | Description | Try it |
---|---|---|
show.bs.tab | Occurs when the tab is about to be shown. | Try it |
shown.bs.tab | Occurs when the tab is fully shown (after CSS transitions have completed) | Try it |
hide.bs.tab | Occurs when the tab is about to be hidden | Try it |
hidden.bs.tab | Occurs when the tab is fully hidden (after CSS transitions have completed) | Try it |
Tip: Use jQuery's event.target and event.relatedTarget to get the active tab and the previous active tab:
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});