使用 Twitter-Bootstrap，如何在切换模式的同时打开选项卡？答案

【问题标题】：Using Twitter-Bootstrap, how do I open a tab at the same time as toggling a modal?使用 Twitter-Bootstrap，如何在切换模式的同时打开选项卡？
【发布时间】：2025-11-22 07:25:03
【问题描述】：

我有一个模态，在那个模态中是标签。模式最初是隐藏的，我有一个按钮列表。

每个按钮都分配给模式中的一个选项卡。当我单击一个按钮时，我希望弹出模式，然后切换到分配给该按钮的选项卡。

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

不幸的是，没有“开箱即用”的解决方案。它需要一些 jQuery/CSS 操作。

基本上，您需要：

在每个按钮上创建 onclick 事件
操作 CSS 以添加/显示目标选项卡

对于 Twitter Bootstrap 代码库，您需要在选项卡链接列表和选项卡窗格中添加/删除类：

//remove active class from all links and buttons
$(".tab-pane").removeClass("active");
$(".tab-btn").removeClass("active");

//add active and fade in class to tab link and content pane
$("#home").addClass("active in");
$("#btn_home").addClass("active");

我最近将它添加到一个项目中，所以继续写了一个小模型。

http://coryprice.com/e/twitter-bootstrap/modal-with-tabs/

【讨论】：

哇 - 在将标签与按钮同步方面做得很好。您的演示效果很好。

【解决方案2】：

我在@sridhar-r 的另一个thread 中找到的另一个解决方案使用目标选项卡上的 tab('show') 方法来切换选项卡，如下所示：

function activeTab(tab){
   $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

因此，在按钮的单击事件中，您只需要使模式处于活动状态并指定要打开的选项卡，例如像这样的东西

var myClickEvent = function(){
       $('#myModal').modal('show');
       activeTab("mydefaultTab");
};

【讨论】：