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

Question

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

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

Answer 1

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

基本上，您需要：

1. 在每个按钮上创建onclick事件
2. 操纵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/

Answer 2

我在@ sridhar-r的另一个thread中找到的另一个解决方案使用目标标签上的标签（＆＃39; show＆＃39;）来切换标签，如下所示：

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

因此，对于按钮的点击事件，您只需要激活模态并指定要打开的标签，例如

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