使用Twitter-Bootstrap，如何在切換模式的同時打開選項卡？

Question

我有一個模式，在那個模式是選項卡。該模式最初是隱藏的，我有一個按鈕列表。

每個按鈕都分配給模式中的選項卡。當我點擊一個按鈕時，我希望模式彈出，然後切換到分配給按鈕的選項卡。

Answer 1

不幸的是，這裏沒有「開箱即用」的解決方案。它需要一些jQuery/CSS操作。

本質上講，你需要：

1. 在每個按鈕上的創建的onclick事件
2. 操縱CSS添加/顯示目標選項卡

對於Twitter的引導代碼庫，你將需要添加/刪除選項卡鏈接列表和選項卡窗格中的類：

//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

另一種解決方案我在另一個thread發現@斯里達爾-R使用目標選項卡上的選項卡（「顯示」）的方法來切換標籤，像這樣：

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

所以您點擊事件的按鈕，你將只需要使模式有效，並指定打開哪個標籤，例如類似的東西

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