アクティブなタブが強調表示されていないコンテンツのリンクを持つブートストラップスイッチタブ

Question

タブのコンテンツ内の別のタブにリンクしようとしています。リンクはタブを細かく切り替えるが、古いタブはまだアクティブとして強調表示されている。どのようにこれを正しく行うことができますか？

<div class="container"> 
    <h2>Dynamic Tabs</h2> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
     <a data-toggle="tab" href="#menu1">This link opens Menu 1</a> 
    </div> 
    </div> 
</div> 

デモ：コンテンツ内メニュー3、その後、「メニュー1」リンクをクリックしてください： https://jsfiddle.net/sua8fmpm/

Answer 1

をあなたが「タブ3」から「アクティブ」クラスを削除すると「タブに追加する必要がありますあなたのリンクをクリックすると「1」と表示されます。

あなた自身のコード（例：jQuery）やブートストラップタブ（ 'show'）をクリックすることでこれを行うことができます - 詳しくはhere、 "指定されたタブを選択して関連するコンテンツを表示します。以前に選択されたものは選択されなくなり、関連するコンテンツは隠されます。この

$("#activate-tab-1").click(function(){ 
    $("#tab-1").tab('show'); 
}); 

デモのような

何か：https://jsfiddle.net/0nqx1fyv/1/