如何创建一个“下一步”按钮，使用 Java 脚本和 Twitter Bootstrap 切换选项卡

How to create a "next" button that switches tabs using Java Script and Twitter Bootstrap

本文关键字：下一步 脚本 Java Twitter 选项 使用 Bootstrap 创建 何创建 一个 按钮      更新时间：2023-09-26

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

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

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

给定这些按钮：

<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）

为了使它循环（最后一个选项卡转到第一个，第一个选项卡转到最后一个），这是我的代码：

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

对于引导程序 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");
})

您可以在任何地方添加此类链接

<a href="#tabname2" data-toggle="tab">Next</a>
<a href="#tabname1" data-toggle="tab">Previous</a>
相关文章：