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

您可以在“主页”选项卡窗格单击事件中侦听迁移按钮，然后使用bootstrap提供的.tab函数

你可能会做这样的事情

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

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

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

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

1 个答案: