Bootstrap: the next button should display the next tab

Question

I want to implement a custom next button in the navigation on the boot tab.

When you click on the next button, the next tab should appear as active. If the last tab is reached, it should start from the first tab.

Download snippet

Answer 1

This will 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 need this functionality, and in the end I ended up:

 $('.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 solution. When the page loads, management always stops on the last tab. If you want to fix this, update the following function

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

to

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