URLでタブにリンクするブートストラップ

Question

私はブートストラップ3で作業していますが、特定のタブにURLをリンクする際にいくつか問題があります。パネルは変わりますが、アクティブなタブはdoes notです。 だから私は行<a href="#tab2" data-toggle="tab">link</a>、tab2に行くが、それだけtab2のパネルに行く、それはタブをアクティブにしません。ここで

はhtmlです：

<div class="tabbable"> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
    <p><a href="#tab2" data-toggle="tab">link</a>.</p> 
    </div> 

    <div class="tab-pane" id="tab2"> 
    <p> I'm in Section 2.</p> 
    </div> 

<div class="tab-pane" id="tab3"> 
    <p>Howdy, I'm in Section 3 </p> 
    </div> 
</div> 
</div> 

あなたは、タブの活性化は、ULの構造に依存http://bootply.com/90412

Answer 1

。 ですから、タブを有効にするために、あなたのプログラムにjQueryのコードのこの部分を追加することができます。Rohithaの答えのようにUpdated code

Answer 2

このリンクでこれをテストすることができます。あなたの例の場合 ます（ブートストラップのJavaScriptの後に）ドキュメントの末尾に追加することで、プラグインのクリックイベントを上書きすることができます：

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    if($(this).parent().prop('tagName')!=='LI') 
    { 

     $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
    } 
    else 
    { 
     $(this).tab('show') 
    } 
    }) 
}); 

参考：Get element type with jQuery

注：短いバージョンでも動作しますこの場合：bootstrapに示すように、あなたはjQueryのプラグインを使用することができ、タブをアクティブにするためには

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
}) 
}); 

Answer 3

、もう少し一般：

$(function() { 
    $('#tab1 a').click(function (e) { 
     e.preventDefault(); 
     $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
}); 

あなたは、このリンクをチェックすることができ

$(function() { 
    $('a.link-to-tab').click(function (e) { 
    e.preventDefault(); 
    $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
}); 

アンカータグはclass="link-to-tab"、タブIDは表示するhrefになります。たとえば、<a class="link-to-tab" href="#tab2">です。