przycisk do wyzwalania Nav-Tab z Twitter Bootstrap

Question

Ten przycisk uruchamia następną kartę, aby załadować zawartość, ale karta sama nie włączy, to pozostaje na pierwszej karcie ..

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

Oto kod nav nav-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> 

każde rozwiązanie do przełączania zarówno treści zakładka & jest doceniana

..per HAPS sposób zmienić przycisk, aby wywołać funkcję next() w * 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

Można przypisać przycisk przeglądania handler kliknięcie przy użyciu 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

Zmieniając "przełączanie danych" na "wyzwalacz danych" dla łącza wyzwalającego, poniższy kod może wyzwolić dowolną kartę o tym samym atrybucie HREF, dla wszystkich wyzwalaczy o podobnym znaczniku.

(nb selektory nie są zoptymalizowane, to tylko przypomnienie tego bardziej elastyczne rozwiązanie)

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>