Click the tabs below to toggle between hidden panes, even via dropdown menus.
-Enable tabbable tabs via javascript:
-$('#myTab').tab('show')
+ Enable tabbable tabs via javascript (each tab needs to be activated individually):
+
+$('#myTab a').click(function (e) {
+ e.preventDefault();
+ $(this).tab('show');
+})
+ You can activate individual tabs in several ways:
+
+$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
+$('#myTab a:first').tab('show'); // Select first tab
+$('#myTab a:last').tab('show'); // Select last tab
+$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
+
You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.
You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
@@ -650,10 +661,10 @@ $('#myModal').on('hidden', function () {
Methods
$().tab
- Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
+ Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
@@ -669,7 +680,7 @@ $('#myModal').on('hidden', function () {
<script>
$(function () {
- $('.tabs a:last').tab('show')
+ $('#myTab a:last').tab('show');
})
</script>
Events
@@ -893,7 +904,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Markup
- For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
+ For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
Methods
$().popover(options)
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 7fd4c98d02..01fcb97619 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -533,7 +533,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Example tabs{{/i}}
{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}
-
{{_i}}Using bootstrap-tab.js{{/i}}
- {{_i}}Enable tabbable tabs via javascript:{{/i}}
- $('#myTab').tab('show')
+ {{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}
+
+$('#myTab a').click(function (e) {
+ e.preventDefault();
+ $(this).tab('show');
+})
+ {{_i}}You can activate individual tabs in several ways:{{/i}}
+
+$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
+$('#myTab a:first').tab('show'); // Select first tab
+$('#myTab a:last').tab('show'); // Select last tab
+$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
+
{{_i}}Markup{{/i}}
- {{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.{{/i}}
+ {{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.{{/i}}
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
@@ -574,10 +585,10 @@ $('#myModal').on('hidden', function () {
{{_i}}Methods{{/i}}
$().tab
- {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
+ {{_i}}Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.{{/i}}
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
<li><a href="#profile">{{_i}}Profile{{/i}}</a></li>
<li><a href="#messages">{{_i}}Messages{{/i}}</a></li>
@@ -593,7 +604,7 @@ $('#myModal').on('hidden', function () {
<script>
$(function () {
- $('.tabs a:last').tab('show')
+ $('#myTab a:last').tab('show');
})
</script>
{{_i}}Events{{/i}}
@@ -817,7 +828,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}Markup{{/i}}
- {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}}
+ {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}
{{_i}}Methods{{/i}}
$().popover({{_i}}options{{/i}})