javascript - 如何使用 Java Script 和 Twitter Bootstrap 创建一个 "next"按钮来切换选项卡

Question

我有以下代码:http://jsfiddle.net/h6rQ2/2/

我正在使用 html 创建一个基本表单。此表单有两个部分——每个部分都包含在一个选项卡中(使用 Twitter Bootstrap 创建的选项卡)。

如何创建从第一个选项卡切换到第二个选项卡的“下一步”按钮？当我现在尝试这样做时，它只提交表格。 Twitter Bootstrap 是否已经提供了让您通过外部按钮切换选项卡的功能？如果是，您如何使用它？

Answer 1

给定这些按钮:

<div class="btn-group">
    <button class="btn" id="prevtab" type="button">Prev</button>
    <button class="btn" id="nexttab" type="button">Next</button>
</div>

你需要这个 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');
});

Working demo (jsfiddle)