rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Add more examples for activating tabs

Browse Source 
Make naming of tab id consistent
This commit is contained in:
Marcus Bointon 2012-03-22 20:36:49 +01:00
parent 2f06366399
commit cfce34e300
3 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

10
docs/javascript.html
View File

@ -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>

10
docs/templates/pages/javascript.mustache vendored
View File

@ -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>