tasto per attivare la Nav-Tab con Twitter Bootstrap

Question

Questo pulsante attiva la scheda successiva per caricare il contenuto, ma la scheda stessa non passare, rimane nella prima scheda ..

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

Qui è il codice per nav nav-schede:

<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> 

qualsiasi soluzione l'interruzione sia il contenuto scheda & è apprezzato

..per HAPS un modo per cambiare il pulsante per attivare la funzione next() 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

è possibile assegnare il pulsante Review un gestore di clic utilizzando 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

Modificando 'data-toggle' su 'data-trigger' per il collegamento di attivazione, il codice seguente può attivare qualsiasi scheda con lo stesso attributo HREF, per tutti i trigger con markup simile.

(N.B. selettori non sono ottimizzati, è solo una guida per una soluzione più flessibile)

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>