Bootstrap: next button should display next tab

351
November 23, 2016, at 9:23 PM

I want to implement a custom next button into the bootstrap tab navigation.

When clicking on the next-button, the next tab should be displayed as active. If the last tab is reached it should start with the first tab.

Bootply snippet

Answer 1

This solve your problem

$('.next-tab').click(function(e){
  if($('.nav-tabs > .active').next('li').hasClass('next-tab')){
    $('.nav-tabs > li').first('li').find('a').trigger('click');
  }else{
    $('.nav-tabs > .active').next('li').find('a').trigger('click');
  }
  e.preventDefault();
});

http://www.bootply.com/XYpxMIgink

Answer 2

I Recently needed this functionality and this is what I ended up with:

$('.change-tab').click(function() { 
  var $this = $(this); 
  var $nav = $($this.data('target')) 
  var $tabs = $nav.find('li'); 
  var $curTab = $tabs.filter('.active'); 
  var cur = $tabs.index($curTab); 
  if ($this.data('direction') == 'next') var $showTab = cur == $tabs.length - 1 ? $tabs.eq(0).find('a') : $tabs.eq(cur + 1).find('a'); 
  else var $showTab = cur == 0 ? $tabs.eq($tabs.length - 1).find('a') : $tabs.eq(cur - 1).find('a'); 
  $showTab.tab('show'); 
}); 
 
 
 
// normal tabs code 
$('#myTab a').click(function (e) { 
	 e.preventDefault(); 
	 $(this).tab('show'); 
}); 
 
$(function () { 
$('#myTab a:last').tab('show'); 
})
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
<div class="container"> 
  <ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#home">Home</a> 
    </li> 
    <li><a href="#profile">Profile</a> 
    </li> 
    <li><a href="#messages">Messages</a> 
    </li> 
    <li><a href="#settings">Settings</a> 
    </li> 
  </ul> 
 
  <div class="tab-content"> 
    <div class="tab-pane active" id="home">Home content...</div> 
    <div class="tab-pane" id="profile">Content here...</div> 
    <div class="tab-pane" id="messages">Messages...</div> 
    <div class="tab-pane" id="settings">Settings...</div> 
  </div> 
</div> 
 
 
<div class="row"> 
  <div class="col-md-12"> 
    <div class="btn-toolbar pull-right"> 
      <div class="btn-group"> 
        <button class="btn btn-default change-tab" data-direction="previous" data-target="#myTab"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button> 
        <button class="btn btn-default change-tab" data-direction="next" data-target="#myTab">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> 
        </button> 
      </div> 
    </div> 
  </div> 
</div>

Answer 3

I am using @DelightedD0D provided solution. When the page load, the control stop on the last tab always. If you want to fix this, please update the following function

$(function () {
$('#myTab a:last').tab('show');
})

to

$(function () {
$('#myTab a:active').tab('show');
})
READ ALSO
How to show and hide div elements based on the selection of bootstrap dropdown in jQuery

How to show and hide div elements based on the selection of bootstrap dropdown in jQuery

I have the following example[nnn]http://jsfiddle. net/ahmedcom/5qu20yu6/.

489
Restrict values in HTML input field at time of input?

Restrict values in HTML input field at time of input?

In this hypothetical page I have these inputs:.

481
&ldquo;if !x&rdquo; working - &ldquo;if !x or !y&rdquo; not working

“if !x” working - “if !x or !y” not working

I need to exclude in a jquery script two containers from unchecking the checkboxes inside them, so I made an if:.

388
Turning a JQuery function into callback

Turning a JQuery function into callback

I have on click method in jquery but I need variables inside of it to be run one after another. I used callback functions before with other jquery methods, but here there are no methods in use, it's just calling another function and changing a variable...

193