Bootstrap: el siguiente botón debería mostrar la siguiente pestaña

Quiero implementar un próximo botón personalizado en la navegación de la pestaña de arranque.

Al hacer clic en el botón siguiente, la siguiente pestaña se debe mostrar como activa. Si se alcanza la última pestaña, debería comenzar con la primera pestaña.

Fragmento de Bootply

Esto resuelve tu problema

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

Recientemente necesité esta funcionalidad y esto es con lo que terminé:

 $('.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'); }) 
    
Home content...
Content here...
Messages...
Settings...

Estoy usando la solución proporcionada @ DelightedD0D. Cuando la página se carga, el control se detiene en la última pestaña siempre. Si quiere corregir esto, actualice la siguiente función

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

a

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