Bootstrap v3.3.5：从同一页面上的按钮激活选项卡和选项卡窗格

Question

我需要能够从另一个选项卡窗格中的按钮激活选项卡和选项卡窗格。我对JS脚本不太了解，所以我希望有人能提供帮助。我的代码如下：

    <div class='container-fluid'>
      <ul class='nav nav-tabs'>
        <li class="active"><a data-toggle="tab" href="#home-tab">Home</a></li>
        <li><a data-toggle="tab" href="#Migration-tab">Migration Info</a></li>
        <li><a data-toggle="tab" href="#howTo-tab">Learning Center</a></li>
        <li><a data-toggle="tab" href="#aboutUs-tab">About Us</a></li>
        <li><a data-toggle="tab" href="#contactUs-tab">Contact Us</a></li>
      </ul>
   <div class='tab-content'>
<div id='home-tab' class='tab-pane fade in active'>
    <div class="panel panel-default" style="padding:3px;">
        <div class="panel-heading" style="background-color: #6600CC; ">
            <h3 style="font-family:Calibri; font-weight:bold; color:white; line-height:0; margin-top:5px; margin-bottom:5px;">
            Migration</h3>      
        </div>
        <div class="panel-body">
            <p>The SharePoint Migration is a large scale 
            effort being led by NPPD to update our current 
            SharePoint platform to the next level. This 
            effort will take several months. To access more 
            information click on the Migration Tab.</p>
            <a href="#Migration-tab" class="btn btn-default pull-right" role="button" data-toggle="tab">
            More Information</a>
        </div>      
    </div>  
</div>
<div id='Migration-tab' class='tab-pane fade'>
    Migration Info  
</div>

 </div>
 </div><!--End Main Container-->

假设的工作方式是用户单击主页选项卡窗格中的“迁移”按钮，并假设激活迁移选项卡和选项卡窗格。但只有迁移窗格被激活。因此，虽然信息在那里，但“主页”选项卡实际上仍然处于活动状态。如果用户想要点击另一个标签，他们必须点击“迁移”，然后点击他们想要的标签。有没有办法让它工作，以便选项卡和选项卡窗格都变为活动状态？ 我已经找了好几个星期了，什么都找不到。

Answer 1

可以在Home tab面板点击事件监听迁移按钮，然后使用bootstrap提供的.tab功能

你可以这样做

$("#Migration-tab").click(function(){
   $('[data-toggle="tab"][href="#Migration-tab"]').tab('show');
})

我找到了这个解决方案over here，你可能想看看。

注意：我没有测试你的代码，我在上面的链接中使用了一些代码示例。