From cfce34e3000b2c02549e3af280668afea61fa752 Mon Sep 17 00:00:00 2001
From: Marcus Bointon <marcus@synchromedia.co.uk>
Date: Thu, 22 Mar 2012 20:36:49 +0100
Subject: [PATCH] Add more examples for activating tabs Make naming of tab id
 consistent

---
 docs/assets/bootstrap.zip                | Bin 50100 -> 50100 bytes
 docs/javascript.html                     |  10 ++++++----
 docs/templates/pages/javascript.mustache |  10 ++++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 789d41cb33064ee3644edd076037205e6734be65..716a5d50990fcefde2495c0aadcd762961d22bb5 100644
GIT binary patch
delta 511
zcmdne&b+0anK!_jnT3l11ge*mP2^Qjk*v@5cLU<m3T_5QmamKq3@mOyS%kV8pt?X6
zc4>&Zi8WHpAd#6iU=g6`#yguiK|+%!aXG-mHs9nj<X{HcFqv1_kX;I>6^J*x3P+lP
zRW9@}1*-%J-u2Ko0;!xBC@qkgo30-k!pXo4bri@lkRjpKPV68dAl|&7x<UXfDBWWN
z7mVwv5&)ZgdyX=iOD8MM)rUJPVs45eSl#}8<}ks@3-^n0!h>Y8%zizP^+=*1zvb*V
zVg~vZC@KTie_+2C3SZ}dADj<z@tgzp%s}74)&D)<43$T=D`&s-<l2McQ2S)S-r9CB
k0EMq{$P0^mrW`Va+Xr&r^Fy|1=7U7t4!eRy`wpuC0Gyq%a{vGU

delta 511
zcmdne&b+0anK!_jnT3l11STewPUKZkIkYv?f6ul||I!L>21b^zj0_AcZa`Utx=BEF
zfhz2WA?ha9NHK#%X4-&7fTA1kY~}<BO`gQ%z<va%3MjVuCYK=xSddrP5T<amt8k<#
zSa6|-DO~WbhrSWm#6W3*%-nSS&=5`rW>m{2hgUnn)i0>75C9t@-2->R=D40Jh~Vux
z%3wDDeFSysWTm<KU?HH>Hb=}&Q3Pw=zt0>dIC<fIF-~}pOqSWN#|#V;BvFvxa`qd6
z90e4W0qZ}o-wTDWbHI-oXaQV)&H;NA`M(F8p?sKK5L2Zm*B%r{QMv740198@5X>fI
aol_1OqS*KRkS&yttjg`MD_FGeuo?hSILluE

diff --git a/docs/javascript.html b/docs/javascript.html
index c9b94a3ca5..f2d23ef52a 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -609,7 +609,7 @@ $('#myModal').on('hidden', function () {
         <div class="span9 columns">
           <h2>Example tabs</h2>
           <p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
-          <ul id="tab" class="nav nav-tabs">
+          <ul id="myTab" class="nav nav-tabs">
             <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
             <li><a href="#profile" data-toggle="tab">Profile</a></li>
             <li class="dropdown">
@@ -638,10 +638,12 @@ $('#myModal').on('hidden', function () {
           <h2>Using bootstrap-tab.js</h2>
           <p>Enable tabbable tabs via javascript:</p>
           <pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
-          <p>You can also activate a specific tab (or a pseudo-selected one) on init:</p>
+          <p>You can select individual tabs in several ways:</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>Markup</h3>
           <p>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.</p>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index b61a0d4247..925377339b 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>