बटन ट्विटर बूटस्ट्रैप

Question

यह बटन ऐसी सामग्री लोड करने के लिए अगले टैब से चलाता है, लेकिन टैब पर ही स्विच नहीं है, यह पहला टैब पर रहता है के साथ नव-टैब ट्रिगर करने के लिए ..

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

यहाँ के लिए कोड है नव नव-टैब:

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

दोनों टैब & सामग्री स्विच करने के लिए किसी भी समाधान सराहना की

..per Haps एक तरह से * बूटस्ट्रैप-tab.js v2.3.1 next() समारोह को गति प्रदान करने के लिए बटन को बदलने के लिए:

, 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

अपनी समीक्षा बटन एक क्लिक हैंडलर jQuery का उपयोग कर आवंटित कर सकते हैं ...

जे एस:

$('#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

ट्रिगरिंग लिंक के लिए 'डेटा-ट्रिगर' को 'डेटा-ट्रिगर' में बदलकर, निम्न कोड समान मार्कअप वाले सभी ट्रिगरों के लिए, समान एचआरईएफ विशेषता वाले किसी भी टैब को ट्रिगर कर सकता है।

(N.B. चयनकर्ता अनुकूलित नहीं हैं, यह एक और अधिक लचीला समाधान के लिए सिर्फ एक मार्गदर्शक है)

जे एस:

$('[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>