如何使用Java Script和Twitter Bootstrap创建切换选项卡的"下一步"按钮

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');
});

工作演示(jsfiddle)