2012-02-27 3 views
3

私はモーダルを持ち、そのモーダルはタブです。モーダルは最初は隠されていて、私はボタンのリストを持っています。Twitter-Bootstrapを使用すると、モーダルを切り替えると同時にタブを開くことはできますか?

各ボタンは、モーダルのタブに割り当てられます。ボタンをクリックすると、モーダルがポップアップされ、ボタンに割り当てられたタブに切り替わります。

答えて

7

残念ながら、これには「アウトオブザボックス」ソリューションはありません。いくつかのjQuery/CSS操作が必要です。

基本的に、あなたがする必要があります。

  1. は、Twitterのブートストラップコードベースを対象タブ

を表示/追加するためにCSSを操作できますボタン

  • のそれぞれについてのonclickイベントを作成します。タブリンクリストとタブペインの両方からクラスを追加/削除する必要があります:

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

  • +0

    ワウ - タブをバットと同期させるための素晴らしい作業ons。あなたのデモは素晴らしいです。 –

    1

    私は@シュリダール-rで別のthreadで見つかった別の解決策はそうのようなタブを切り替えるためにターゲット]タブ上のタブ(「ショー」)メソッドを使用していますので、

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

    の上ごモーダルをアクティブにして開くタブを指定するために必要なボタンのクリックイベント。

    var myClickEvent = function(){ 
         $('#myModal').modal('show'); 
         activeTab("mydefaultTab"); 
    }; 
    
    関連する問題