@@ -638,10 +638,12 @@ $('#myModal').on('hidden', function () {
Using bootstrap-tab.js
Enable tabbable tabs via javascript:
$('#myTab').tab('show')
- You can also activate a specific tab (or a pseudo-selected one) on init:
+ You can select individual tabs in several ways:
-$('#myTab a[href="#profile"]').tab('show');
-$('#myTab a:last').tab('show');
+$('#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)
Markup
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.
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index b61a0d42..92537733 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}}Home{{/i}}
- {{_i}}Profile{{/i}}
-
@@ -562,10 +562,12 @@ $('#myModal').on('hidden', function () {
{{_i}}Using bootstrap-tab.js{{/i}}
{{_i}}Enable tabbable tabs via javascript:{{/i}}
$('#myTab').tab('show')
- {{_i}}You can also activate a specific tab (or a pseudo-selected one) on init:{{/i}}
+ {{_i}}You can select individual tabs in several ways:{{/i}}
-$('#myTab a[href="#profile"]').tab('show');
-$('#myTab a:last').tab('show');
+$('#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. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.{{/i}}