Trigger Nav-Tab Launch Button Using Twitter Bootstrap

Question

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

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

Here is the code for the navigation navigation tabs:

  <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li> <li><a href="#tab2" data-toggle="tab">Quantities</a></li> <li><a href="#tab3" data-toggle="tab">Summary</a></li> </ul> 

ANY DECISION to switch the contents of the tab is USED

.. maybe a way to change the button to start the next() function in * bootstrap-tab.js v2.3.1:

  , activate: function ( element, container, callback) { var $active = container.find('> .active') , transition = callback && $.support.transition && $active.hasClass('fade') function next() { $active .removeClass('active') .find('> .dropdown-menu > .active') .removeClass('active') element.addClass('active') if (transition) { element[0].offsetWidth // reflow for transition element.addClass('in') } else { element.removeClass('fade') } if ( element.parent('.dropdown-menu') ) { element.closest('li.dropdown').addClass('active') } callback && callback() } transition ? $active.one($.support.transition.end, next) : next() $active.removeClass('in') } } 

Answer 1

You can assign a click handler button to your Review button 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

Answer 2

By changing the "data switch" to the "data trigger" for the trigger link, the following code can trigger any tab with the same HREF attribute for all triggers with the same markup.

(NB Selectors are not optimized, this is just a guide for 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 3

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 4

With Bootstrap 4 & jQuery, everything is pretty simple, I use this solution:

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