Bootstrap Tutorial

CHAPTER
38
Bootstrap Tab Plugin
Tabs were introduced in the chapter Bootstrap Navigation Elements. By combining a few data attributes,
you can easily create a tabbed interface. With this plugin you can transition through panes of local content in tabs
or pills, even via dropdown menus.
If you want to include this plugin functionality individually, then you will need tab.js. Else, as mentioned in the
chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.
Usage
You can enable tabbable tabs in the following two ways:
Via data attributes: you need to add data-toggle="tab" or data-toggle="pill" to the anchors.
Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding
thenav and nav-pills classes will apply pill styling.
Home
...
Via JavaScript: you can enable tabs using Javscript as below :
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
Here’s an example of different ways to activate individual tabs:
// Select tab by name
$('#myTab a[href="#profile"]').tab('show')
// Select first tab
$('#myTab a:first').tab('show')
// Select last tab
$('#myTab a:last').tab('show')
// Select third tab (0-indexed)
TUTORIALS POINT
Simply Easy Learning