タブの外部リンクを作成するブートストラップタブ

Question

外部リンク経由でブートストラップタブにアクセスできるようにしようとしています... ex：http://example.org/folder#First以下のスクリプトを使用しても何も起こりません。 http://example.org/folder#Firstをクリックすると、そのタブが開いた状態でユーザーが表示されます。

<div id="tabmenu_top" class="row"> 
    <div class="row"> 
     <div style="display: table; margin: 0 auto;"> 
      <ul class="nav nav-tabs center-block" id="sync"> 
       <li><a data-toggle="tab" href="/#First">Tab 1</a></li> 
       <li><a data-toggle="tab" href="/#Second">Tab 2</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

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

Answer 1

あなたは、DOMの準備ができているとあなたが前方にhref秒でスラッシュ必要がない場合に必要なタブを選択する必要があります。これが完了すると、window.location.hashを使用してURLからハッシュを取得することができ、それぞれ#Firstと#Secondを返します。結果の値を使用してタブを選択することができます。

完全なHTML：

<div id="tabmenu_top" class="row"> 
    <div class="row"> 
    <div style="display: table; margin: 0 auto;"> 
     <ul class="nav nav-tabs center-block" id="sync"> 
     <li><a data-toggle="tab" href="#First">Tab 1</a></li> 
     <li><a data-toggle="tab" href="#Second">Tab 2</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 
<div class="tab-content"> 
    <div class="tab-pane fade active" id="First"> 
    <h2>Green</h2> 
    <img src="https://placehold.it/350x150/00ff00"/> 
    </div> 
    <div class="tab-pane fade" id="Second"> 
    <h2>Red</h2> 
    <img src="https://placehold.it/350x150/ff0000"/> 
    </div> 
</div> 

のjQuery：

説明

$(function() { 
    //Just for demonstration purposes, I've hard-coded the hash value. 
    var hash = "#Second"; //You would use window.location.hash here 
    if (hash) { 
    $('.nav-tabs a[href="' + hash + '"]').tab('show'); 
    } 
}); 

Fiddle Demo

のコメントを参照してください。