Bootstrap选项卡：表单的下一个和上一个按钮

Question

我试图（最终）在几个Bootstrap 3.x选项卡上分割一个表单，但我遇到上一个和下一个按钮的问题。 当手动单击选项卡或使用按钮时，只有第一个下一个按钮起作用，有时选项卡内容在选项卡之间根本不会更改。

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary" id="btnNext">Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnNext">Next</a>
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
</div>
<script>
  $('#btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('#btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>

Answer 1

首先是全部： ID必须是独一无二的

这是您的工作代码： http ： //www.bootply.com/120472

HTML：

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext" >Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext" >Next</a>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>

JS：

 $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

片段：

  $('.btnNext').click(function(){ $('.nav-tabs > .active').next('li').find('a').trigger('click'); }); $('.btnPrevious').click(function(){ $('.nav-tabs > .active').prev('li').find('a').trigger('click'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li> <li><a href="#tab2" data-toggle="tab">Quantities</a></li> <li><a href="#tab3" data-toggle="tab">Summary</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <a class="btn btn-primary btnNext" >Next</a> </div> <div class="tab-pane" id="tab2"> <a class="btn btn-primary btnNext" >Next</a> <a class="btn btn-primary btnPrevious" >Previous</a> </div> <div class="tab-pane" id="tab3"> <a class="btn btn-primary btnPrevious" >Previous</a> </div> </div> 

Answer 2

对于bootstrap 4

<button class="btn btn-info btn-lg previous">Previous</button>
<button class="btn btn-info btn-lg next">Next</button>


$('.next').click(function () {
    $('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});

$('.previous').click(function () {
    $('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});

Answer 3

想要在标签上执行下一个上一个操作的任何人，请按照以下步骤操作

a）在每个选项卡面板中放置下一个prev按钮

b）将按钮单击绑定到正文，以便在单击时调用它

c）点击触发点击下一个/上一个标签

d）如果是最后一个标签，则将用户重定向到适当的标签（呼叫显示第一个或最后一个标签的事件）

 /**** JQuery *******/ jQuery('body').on('click','.next-tab', function(){ var next = jQuery('.nav-tabs > .active').next('li'); if(next.length){ next.find('a').trigger('click'); }else{ jQuery('#myTabs a:first').tab('show'); } }); jQuery('body').on('click','.previous-tab', function(){ var prev = jQuery('.nav-tabs > .active').prev('li') if(prev.length){ prev.find('a').trigger('click'); }else{ jQuery('#myTabs a:last').tab('show'); } }); 

 /******* CSS *********/ .previous-tab, .next-tab{ display: inline-block; border: 1px solid #444348; border-radius: 3px; margin: 5px; color: #444348; font-size: 14px; padding: 10px 15px; cursor: pointer; } 

 <!-- HTML --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <ul class="nav nav-tabs" id="myTabs" role="tablist"> <li role="presentation" class="active"><a href="#step1" aria-controls="step1" role="tab" data-toggle="tab">Step1</a></li> <li role="presentation"><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab">Step2</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="step1"> <p>tab1 content</p> <p>//Include next prev buttons in the tab-content</p> <span class="previous-tab">previous</span> <span class="next-tab">next</span> </div> <div role="tabpanel" class="tab-pane" id="step2"> <p>tab2 content</p> <p>//Include next prev buttons in the tab-content</p> <span class="previous-tab">previous</span> <span class="next-tab">next</span> </div> </div>