[:de]Bootstrap Navigations-Tabs mit Dropdown-Menüs: Weiter-Button implementieren[:en]Bootstrap navigation tabs with dropdown menus: How to implement Next button[:]

Last Updated on 2016-09-27.

[:en]There are many projects on Github which implement wizard-like Next and Previous buttons for Bootstrap tabbed menus. Unfortunately, they seem not to consider there can be dropdown menus inside the tabs, which leads to errors.

So here is some code to show one way how to implement the Next button.

Assuming you have some tabs like those:

<ul class="nav nav-tabs">
	<li role="navigation" class="active dropdown">
	<a class="dropdown-toggle" data-toggle="dropdown" href="#">
	    Main 1
	    <span class="caret"></span>
	</a>
	<ul class="dropdown-menu">
	    <li class="active"><a data-toggle="tab" href="#tab1">Sub 1</a></li>
	    <li><a data-toggle="tab" href="#tab2">Sub 2</a></li>
	    <li><a data-toggle="tab" href="#tab3">Sub 3</a></li>
	</ul>
	</li>
	...

<div class="text-right">
  <button id="next-tab" class="btn btn-default right">
  <span class="glyphicon glyphicon-chevron-right"></span>
    Next                
  </button>
</div>

Use this JS / JQuery code:

$('#next-tab').click(function (e) {
    
    var activetab = $('.nav-tabs > .active');   
    children = activetab.find('li');
    var activeHref;

    if (children.length > 0) { //dropdown menu
        var activeSubtab = activetab.find('.active');
        activeHref = activeSubtab.find('a')[0].hash;
    }
    else { //common tab
        activeHref = activetab.find('a')[0].hash;
    }

    var tabIndex = activeHref.replace("#tab", "");

    tabIndex++;
    var nextTabname = "tab" + tabIndex;

    var activeHref = $('a[href$="' + nextTabname + '"]').trigger('click');
  
    e.preventDefault();
});

 [:]