javascript - Button to Trigger Nav-Tab with Twitter Bootstrap -


this button triggers next tab load content, tab not switch, remains on first tab..

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

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

any solution for switching both tab&content appreciated

..perhaps way change button trigger 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 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')     }   } 

you assign review button 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


Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -