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

Question

I am trying to (eventually) split a form over several Bootstrap 3.x tabs, but I am having trouble with the previous and next buttons. Only the first next button functions and sometimes the tab content doesn't change at all between tabs when the tabs are manually clicked OR using the buttons.

<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

First at All : ID MUST BE UNIQUE

Here is your working code : 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');
});

Snippet:

  $('.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

For 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

Anyone who want to perform next previous operations on tab, follow following steps:

a) Put next prev buttons in each tab-panel

b) Bind the buttons clicks to body so that it will be called on click

c) On click trigger click of next/prev tab

d) If it is last tab redirect user to appropriate tab (Call show events of first or last tab)

 /**** 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>