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

Posted 2023-05-08

【中文标题】Bootstrap v3.3.5：从同一页面上的按钮激活选项卡和选项卡窗格

【英文标题】：Bootstrap v3.3.5: Activating a Tab and Tab Pane from Button on the Same Page

【发布时间】：2018-06-26 20:43:15

【问题描述】：

我需要能够从另一个选项卡窗格中的按钮激活选项卡和选项卡窗格。我对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-->

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

【参考方案1】：

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

你可以这样做

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

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

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

【讨论】：

对不起，这仍然不起作用。它将激活选项卡窗格，但也不会激活选项卡。我认为代码中的某些内容需要将选项卡的状态更改为活动状态。但我不确定如何编辑您的代码。如果我将 id 添加到 .

可能会有所帮助

好主意！添加 id 会让它更清楚尝试一下，让我知道它是否有效