Add more examples for activating tabs

Make naming of tab id consistent

1 files changed, 6 insertions, 4 deletions

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index b61a0d424..925377339 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -533,7 +533,7 @@ $('#myModal').on('hidden', function () {
         <div class="span9 columns">
           <h2>{{_i}}Example tabs{{/i}}</h2>
           <p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
-          <ul id="tab" class="nav nav-tabs">
+          <ul id="myTab" class="nav nav-tabs">
             <li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
             <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
             <li class="dropdown">
@@ -562,10 +562,12 @@ $('#myModal').on('hidden', function () {
           <h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2>
           <p>{{_i}}Enable tabbable tabs via javascript:{{/i}}</p>
           <pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
-          <p>{{_i}}You can also activate a specific tab (or a pseudo-selected one) on init:{{/i}}</p>
+          <p>{{_i}}You can select individual tabs in several ways:{{/i}}</p>
 <pre class="prettyprint linenums">
-$('#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)
 </pre>
           <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the bootstrap tab styling.{{/i}}</p>