使用Twitter Bootstrap触发Nav-Tab的按钮

Question

此按钮触发下一个选项卡以加载内容,但选项卡本身不切换,它仍保留在第一个选项卡上.

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

以下是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>

用于切换标签和内容的任何解决方案均为 APPRECIATED

..也许是一种更改按钮以触发next()*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

您可以使用jQuery为Review按钮指定一个单击处理程序...

JS:

$('#btnReview').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

HTML:

<a class="btn btn-primary" href="#" id="btnReview">Review</a>

工作演示

Answer 2

通过将触发链接的"数据切换"更改为"数据触发",对于具有相似标记的所有触发器,以下代码可以触发具有相同HREF属性的任何选项卡.

(NB选择器未经过优化,它只是更灵活解决方案的指南)

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>