diff options
| author | Marcus Bointon <[email protected]> | 2012-03-22 20:36:49 +0100 |
|---|---|---|
| committer | Marcus Bointon <[email protected]> | 2012-03-22 20:36:49 +0100 |
| commit | cfce34e3000b2c02549e3af280668afea61fa752 (patch) | |
| tree | 4ef26fe4531076e87ef2c0768c65b6d6e5e92e32 /docs | |
| parent | 2f06366399f1b0572b0dbcbadcf06df9e4867f2b (diff) | |
| download | bootstrap-cfce34e3000b2c02549e3af280668afea61fa752.tar.xz bootstrap-cfce34e3000b2c02549e3af280668afea61fa752.zip | |
Add more examples for activating tabs
Make naming of tab id consistent
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/bootstrap.zip | bin | 50100 -> 50100 bytes | |||
| -rw-r--r-- | docs/javascript.html | 10 | ||||
| -rw-r--r-- | 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 Binary files differindex 789d41cb3..716a5d509 100644 --- a/docs/assets/bootstrap.zip +++ b/docs/assets/bootstrap.zip diff --git a/docs/javascript.html b/docs/javascript.html index c9b94a3ca..f2d23ef52 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 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> |