Reputation: 155
I want to activate a tab after a click on a button. When I click on the button , the tab pane "bbb" should be the activate one.
<ul class="nav nav-tabs">
<li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
<li><a href="#bbb" data-toggle="tab">BBB</a></li>
<li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane active" id="aaa">
<div>
<button type="submit" class="btn btn-primary" aria-label="Left Align" onclick="activateTab('bbb')" name="activateUser">
Change active tab
</button>
</div>
</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
function activateTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
Here is an example, that doesn't work.
Upvotes: 1
Views: 2461
Reputation: 508
don't separate function from html set all together into html like the following
<script type="text/javascript">
function activateTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};</script>
<ul class="nav nav-tabs">
<li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
<li><a href="#bbb" data-toggle="tab">BBB</a></li>
<li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane active" id="aaa">
<div>
<button type="submit" class="btn btn-primary" aria-label="Left Align" onclick="activateTab('bbb')" name="activateUser">
Change active tab
</button>
</div>
</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
Upvotes: 1
Reputation: 192
The function activateTab() is onload function as default option on jsfiddle. It is not on global scope.
You can use Load Type to No wrap from options or easier to do:
window.activateTab = function(tab) {
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
}
Upvotes: 1