Bootstrap: Next Button Should Display Next Tab

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

Solution 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

Solution 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');
  elsevar $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');
})

<linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"rel="stylesheet" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><divclass="container"><ulclass="nav nav-tabs"id="myTab"><liclass="active"><ahref="#home">Home</a></li><li><ahref="#profile">Profile</a></li><li><ahref="#messages">Messages</a></li><li><ahref="#settings">Settings</a></li></ul><divclass="tab-content"><divclass="tab-pane active"id="home">Home content...</div><divclass="tab-pane"id="profile">Content here...</div><divclass="tab-pane"id="messages">Messages...</div><divclass="tab-pane"id="settings">Settings...</div></div></div><divclass="row"><divclass="col-md-12"><divclass="btn-toolbar pull-right"><divclass="btn-group"><buttonclass="btn btn-default change-tab"data-direction="previous"data-target="#myTab"><spanclass="glyphicon glyphicon-arrow-left"aria-hidden="true"></span> Last</button><buttonclass="btn btn-default change-tab"data-direction="next"data-target="#myTab">Next <spanclass="glyphicon glyphicon-arrow-right"aria-hidden="true"></span></button></div></div></div></div>

Solution 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');
})