使用 Twitter Bootstrap 触发导航选项卡的按钮

Button to Trigger Nav-Tab with Twitter Bootstrap(使用 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 触发导航选项卡的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！