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

【问题标题】：How to create a "next" button that switches tabs using Java Script and Twitter Bootstrap如何使用 Java Script 和 Twitter Bootstrap 创建切换选项卡的“下一步”按钮
【发布时间】：2012-08-06 08:52:06
【问题描述】：

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

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

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

【问题讨论】：

你试过什么？ This 向您展示如何使用 JS 选择特定选项卡。现在你只需要弄清楚如何获取当前元素的下一个兄弟。
我创建了一个调用以下函数的按钮：$(function next () {$('#tab_bar a:last').tab('show');})。但是我遇到了两个问题：（1）当我第一次加载页面时，第二个选项卡已经处于活动状态，而我希望第一个选项卡处于活动状态（2）当我按下按钮时，它会在切换到第二个选项卡之前提交表单.我是新手，所以我确定我忽略了一些重要的事情
我感觉 Twitter Bootstrap 提供的功能可以用来完成我所需要的。但我不确定如何准确地使用它们
为什么所有的反对票？甚至还提供了一个小提琴！
你用 e.preventDefault() 试过了吗？

标签： javascript html button twitter-bootstrap

【解决方案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)

【讨论】：

我应该以某种方式添加 javascript 吗？我将您的 javascript 代码复制粘贴到一个单独的文件中，并在我的 html 的头部调用该文件。但它仍然无法正常工作，而且我已经走到了尽头。
好的，经过一些广泛的测试，我很确定我没有正确加载你的 javascript。这就是我目前所做的：将您的代码简单地复制粘贴到文件“custom.js”中。我做错了吗？
@goelv 您需要等待 dom 准备好执行此操作。该演示正在运行，因为 jsfiddle 默认执行此操作。检查this doc，并将我的代码放在一个函数中，该函数只有在dom准备好后才会被调用。
哇，我有很多关于 javascript 的知识要学。非常感谢，它工作得很好！
不适用于带有下拉选项的选项卡。似乎激活了下拉列表中的所有选项卡。有什么解决办法吗？

【解决方案2】：

为了让它循环（最后一个标签页到第一个，第一个标签页到最后一个），这是我的代码：

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】：

对于引导程序 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>

【讨论】：