如何创建“下一步”按钮，切换使用Java脚本和Twitter的引导

问题描述：

标签我有以下代码：http://jsfiddle.net/h6rQ2/2/如何创建“下一步”按钮，切换使用Java脚本和Twitter的引导

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

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

你尝试过什么联系？ [This]（http://twitter.github.com/bootstrap/javascript.html#tabs）向您展示了如何使用JS选择特定的选项卡。现在你只需要弄清楚如何获得当前元素的下一个兄弟。 – sachleen 2012-08-09 06:54:21

我创建了一个调用以下函数的按钮：$（function next（）{$（'#tab_bar a：last'）.tab（'show'）;}）。我遇到两个问题：（1）当我第一次加载页面时，第二个标签页已经激活，而我希望第一个标签页处于活动状态（2）当我按下按钮时，它会在切换到第二个标签页之前提交表单。我是新来的，所以我确定我忽略了一些重要的东西 – goelv 2012-08-09 06:58:44

我有一种感觉，使用Twitter Bootstrap提供的功能可以用来完成我所需要的功能。但我不确定如何正确使用它们 – goelv 2012-08-09 07:00:34

答

鉴于这些按钮：

<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头部调用该文件。它仍然没有工作，而我正处于我的绳索末端。 – goelv 2012-08-09 22:09:59

好吧，经过一些广泛的测试后，我很确定我没有正确加载你的javascript。这是我目前的做法：将代码简单地复制粘贴到文件“custom.js”中。难道我做错了什么？ – goelv 2012-08-09 22:25:05

@goelv您需要*等待dom准备好这样做。该演示正在工作，因为jsfiddle默认是这样做的。检查[这个文档]（http://api.jquery.com/jQuery/#jQuery3），并将我的代码放在一个函数中，只有在dom准备好后才会调用它。 – Sherbrow 2012-08-09 22:39:46

答

为了使循环（最后一个标签页转到第一，标签进入到最后），这是我的代码：

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>

如何创建“下一步”按钮，切换使用Java脚本和Twitter的引导

相关推荐