Button to Trigger Nav-Tab with Twitter Bootstrap

Question

This button triggers the next tab to load content, but the tab itself does not switch, it remains on the first tab..

Answer 1

Using Bootstrap 4

var nextTab;    
    $('.nav-link').map(function(element) {
                    if($(this).hasClass("active")) {
                        nextTab = $(this).parent().next('li');
                    }
                })

    nextTab.find('a').trigger('click');

Answer 2

It's quite simple with Bootstrap 4 & JQuery, i'm using this solution:

 $(document).ready(function(){
        activaTab('aaa');
    });

    function activaTab(tab){
        $('.tab-pane a[href="#' + tab + '"]').tab('show');
    };

Answer 3

By changing 'data-toggle' to 'data-trigger' for the triggering link, the following code can trigger any tab with the same HREF attribute, for all triggers with similar markup.

(N.B. Selectors are not optimised, it's just a guide to a more flexible solution)

JS:

$( '[data-trigger="tab"]' ).click( function( e ) {
    var href = $( this ).attr( 'href' );
    e.preventDefault();
    $( '[data-toggle="tab"][href="' + href + '"]' ).trigger( 'click' );
} );

HTML:

<a class="btn btn-primary" href="#tab2" data-trigger="tab">Review</a>

Answer 4

You could assign your Review button a click handler using jQuery...

JS:

$('#btnReview').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

HTML:

<a class="btn btn-primary" href="#" id="btnReview">Review</a>

Working Demo