Bootstrap: next button should display next tab

Question

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