I have one button
and bootstrap tab
.
我有一个按钮和引导选项卡。
on click of button want to add class active to first tab element.
单击按钮想要将类激活添加到第一个选项卡元素。
I'm generating all tab elements dynamically , and want to active only very first tab element on button click. MyButton
我正在动态生成所有制表符元素,并希望仅在按钮单击时激活第一个制表符元素。为myButton
<ul class="nav nav-tabs">
<li><a href="#divArea1" data-toggle="tab">div1<i class="fa"></i></a></li>
<li><a href="#divArea2" data-toggle="tab">div2 <i class="fa"></i></a></li>
</ul>
2 个解决方案
#1
1
Here is a JSFiddle, clicking the button you have the first tab with class active
:
这是一个JSFiddle,单击按钮,你有第一个类激活类的选项卡:
HTML:
<ul class="nav nav-tabs">
<li><a href="#divArea1" data-toggle="tab">div1<i class="fa"></i></a>
</li>
<li><a href="#divArea2" data-toggle="tab">div2 <i class="fa"></i></a>
</li>
</ul>
<button class="btn btn-default clickme">Click</button>
JS:
$(document).ready(function () {
$('.clickme').click(function () {
$('.nav-tabs li:first').addClass('active');
});
});
#2
1
try this:
$('#MyButton').click(function() {
$('.nav-tabs a:first').tab('show');
});
#1
1
Here is a JSFiddle, clicking the button you have the first tab with class active
:
这是一个JSFiddle,单击按钮,你有第一个类激活类的选项卡:
HTML:
<ul class="nav nav-tabs">
<li><a href="#divArea1" data-toggle="tab">div1<i class="fa"></i></a>
</li>
<li><a href="#divArea2" data-toggle="tab">div2 <i class="fa"></i></a>
</li>
</ul>
<button class="btn btn-default clickme">Click</button>
JS:
$(document).ready(function () {
$('.clickme').click(function () {
$('.nav-tabs li:first').addClass('active');
});
});
#2
1
try this:
$('#MyButton').click(function() {
$('.nav-tabs a:first').tab('show');
});