Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Tabs: Next & Previous Buttons for Forms

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> 
like image 782
Benjamin Morrison Avatar asked Mar 10 '14 10:03

Benjamin Morrison


People also ask

How do I show the next tab on bootstrap on button click?

find('a') selector you can select next tab and make it active. And if next selector not found make the first tab active. Save this answer.

How do I create a navigation tab in bootstrap?

Approach: To create a tabbed navigation menu, create a basic unordered list with list items as links. Then add classes nav and nav-tabs of bootstrap to unordered list and nav-items class to list items. Example 1: HTML.

How will you create a tabbed pills and vertical pills navigation menu in bootstrap?

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content .

What are tabs in bootstrap?

Tabs are used to separate content into different panes where each pane is viewable one at a time. For a tutorial about Tabs, read our Bootstrap Tabs/Pills Tutorial.


1 Answers

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>
like image 138
BENARD Patrick Avatar answered Sep 25 '22 06:09

BENARD Patrick