使用 Twitter Bootstrap 触发导航选项卡的按钮 [英] Button to Trigger Nav-Tab with Twitter Bootstrap

问题描述

此按钮触发下一个标签页加载内容，但标签页本身并没有切换，它仍然在第一个标签页上..

This button triggers the next tab to load content, but the tab itself does not switch, it remains on the first tab..

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

这里是 nav nav-tabs 的代码:

Here is the code for 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 the tab&content IS APPRECIATED

..也许是在bootstrap-tab.js v2.3.1中改变按钮触发next()函数的方法:

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

推荐答案

您可以使用 jQuery 为 Review 按钮分配一个点击处理程序...

You could assign your Review button a 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>

工作演示

这篇关于使用 Twitter Bootstrap 触发导航选项卡的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！