按钮，触发导航，标签与Twitter的引导

Question

此按钮会触发下一个标签加载内容，但本身不切换选项卡，它仍然是第一个选项卡..

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

下面是代码NAV NAV-选项卡：

<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 click处理...

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

Answer 2

通过将“数据切换”更改为触发链接的“数据触发器”，以下代码可触发具有相同HREF属性的任何选项卡，适用于所有具有相似标记的触发器。

（注：选择器不是最优的，它只是一个指南，更灵活的解决方案）

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>