<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>
+<pre class="prettyprint linenums">
+$('#myTab a[href="#profile"]').tab('show');
+$('#myTab a:last').tab('show');
+</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.{{/i}}</p>
+ <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>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
{{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
</p>
<pre class="prettyprint linenums">
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
<li><a href="#profile">{{_i}}Profile{{/i}}</a></li>
<li><a href="#messages">{{_i}}Messages{{/i}}</a></li>
<script>
$(function () {
- $('.tabs a:last').tab('show')
+ $('#myTab a:last').tab('show')
})
</script></pre>
<h3>{{_i}}Events{{/i}}</h3>
</div>
<h3>{{_i}}Markup{{/i}}</h3>
<p>
- {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}}
+ {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}
</p>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().popover({{_i}}options{{/i}})</h4>