Javascript 如何创建使用 Java Script 和 Twitter Bootstrap 切换选项卡的“下一步”按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11878180/
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 create a "next" button that switches tabs using Java Script and Twitter Bootstrap
提问by goelv
I have the following code: http://jsfiddle.net/h6rQ2/2/
我有以下代码：http: //jsfiddle.net/h6rQ2/2/
I'm using html to create a basic form. This form has two sections -- each section is contained within a tab (tabs created with Twitter Bootstrap).
我正在使用 html 创建一个基本表单。此表单有两个部分——每个部分都包含在一个选项卡中（使用 Twitter Bootstrap 创建的选项卡）。
How do I create a "next" button which switches from the first tab to the second tab? When I try doing it right now, it only submits the form. Does Twitter Bootstrap already provide a function that lets you switch tabs via an external button? If so, how do you use it?
如何创建从第一个选项卡切换到第二个选项卡的“下一步”按钮？当我现在尝试这样做时，它只提交表单。Twitter Bootstrap 是否已经提供了让你通过外部按钮切换标签的功能？如果是这样，你如何使用它？
回答by Sherbrow
Given those buttons :
鉴于这些按钮：
<div class="btn-group">
<button class="btn" id="prevtab" type="button">Prev</button>
<button class="btn" id="nexttab" type="button">Next</button>
</div>
You'd need this JS :
你需要这个 JS ：
var $tabs = $('.tabbable li');
$('#prevtab').on('click', function() {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
});
$('#nexttab').on('click', function() {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
});
回答by hugsbrugs
To make it cyclic (last tab goes to first, first tab goes to last), here is my code :
为了使其循环（最后一个标签先到，第一个标签到最后），这是我的代码：
function previousVin(){
var previousElement = $('#myTab li').filter('.active').prev('li').find('a[data-toggle="tab"]');
if(previousElement.html()===undefined){
$('#myTab a:last').tab('show');
}else{
previousElement.tab('show');
}
}
function nextVin(){
var nextElement = $('#myTab li').filter('.active').next('li').find('a[data-toggle="tab"]');
if(nextElement.html()===undefined){
$('#myTab a:first').tab('show');
}else{
nextElement.tab('show');
}
}
回答by Calvin Grain
For bootstrap 3
对于引导程序 3
$('a[data-toggle^="tab"]').click(function(){
var data = $(this).attr("href");
$('a[data-toggle^="tab"]').parent("li").removeClass("active");
$('li a[href^="'+data+'"]').parent("li").addClass("active");
$('.tab-pane').removeClass("active");
$(data).addClass("active");
})
You can add links like these anywhere
您可以在任何地方添加这样的链接
<a href="#tabname2" data-toggle="tab">Next</a>
<a href="#tabname1" data-toggle="tab">Previous</a>
