如何使用 javascript 更改活动的引导程序选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39461076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change active bootstrap tab with javascript
提问by beamerfan
I have tried to change the active tab and failed to use the javascript onclick element correctly. Here's the code:
我试图更改活动选项卡，但未能正确使用 javascript onclick 元素。这是代码：
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active"><a href="#first" data-toggle="tab">First</a></li>
<li><a href="#second" data-toggle="tab">Second</a></li>
<li><a href="#third" data-toggle="tab">Third</a></li>
</ul>
<div class=“tab-content">
<div id="first" class="tab-pane fade in active”>
Text
<a href="#second" class="btn btn-primary btn-lg" onclick=“CHANGE ACTIVE TAB TO SECOND” data-toggle="tab">Second</a>
<a href="#third" class="btn btn-primary btn-lg" onclick=“CHANGE ACTIVE TAB TO THIRD” data-toggle=“tab">Third</a>
</div>
<div id="second" class="tab-pane fade in”>
Text
</div>
<div id="third" class="tab-pane fade in”>
Text
</div>
</div>
How could I be able to use the buttons to change the active tab to their associated id? Please advise.
我如何才能使用按钮将活动选项卡更改为其关联的 ID？请指教。
Have a great day!
祝你有美好的一天！
采纳答案by Aya Salama
You can trigger click on tab you want when click on your buttons
单击按钮时，您可以触发单击所需的选项卡
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active"><a href="#first" data-toggle="tab" id="first_tab">First</a></li>
<li><a href="#second" data-toggle="tab" id="second_tab">Second</a></li>
<li><a href="#third" data-toggle="tab" id="third_tab">Third</a></li>
</ul>
<div class="tab-content">
<div id="first" class="tab-pane fade in active">
Text
<a class="btn btn-primary btn-lg" onclick="$('#second_tab').trigger('click')">Second</a>
<a class="btn btn-primary btn-lg" onclick="$('#third_tab').trigger('click')">Third</a>
</div>
....
</div>
here is a Demo
这是一个演示
回答by Jacob Goh
you may also use .tab('show')for more flexibility
您也可以使用.tab('show')以获得更大的灵活性
https://codepen.io/jacobgoh101/pen/ALELNr
https://codepen.io/jacobgoh101/pen/ALELNr
<button class="btn btn-primary" onclick="menu3()">go to menu 3</button>
javascript:
javascript:
function menu3(){
$('[href="#menu3"]').tab('show');
}
Bootstrap documentation: https://getbootstrap.com/javascript/#tabs
Bootstrap 文档：https: //getbootstrap.com/javascript/#tabs
回答by CatholicForEver
I recommend the data attribute approach, is a clean solution and separate View from Controller code
我推荐数据属性方法，是一个干净的解决方案，并将视图与控制器代码分开
<a href="#btn-next"data-next="#tab1" class="btn btn-primary">go to menu 1</a>
<a href="#btn-next"data-next="#tab2" class="btn btn-primary">go to menu 2</a>
javascript:
javascript:
$('a[href="#btn-next"]').on('click', function(event){
event.preventDefault();
var tab = $(this).data('next');
$(tab).tab('show');
})
回答by Abenezer _abeti
Here is your js
这是你的js
$('#submit').click(function (e) {
$('#myTab a[href=#tabs3-2k_tab2]').tab('show')
e.preventDefault()
});
回答by Kramer
I recommended this codes.
我推荐了这个代码。
<div class="tab-control" data-role="tab-control">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div class="frames">
<div class="frame" id="tab1">
//Content tab 1
</div>
<div class="frame" id="tab2">
//Content tab 2
</div>
</div>
</div>
Add effects that you want in class attribute.
在类属性中添加您想要的效果。
