ページ外のURLのIDを使用してタブにアクセスできません

Question

この場合、私は自分のローカルホスト、自宅、およびプロジェクトに2ページあります。

ホームページ - ローカルホスト、 プロジェクトページ - ローカルホスト/プロジェクト/

プロジェクトのページには、ブートストラップ3からタブNAVた

：私はプロジェクトページ内のタブ間を移動するときには、[OK]を作品

<ul class="nav nav-tabs" data-tabs="tabs"> 
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li> 
    <li><a data-toggle="tab" href="#orange">Orange</a></li> 
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li> 
    <li><a data-toggle="tab" href="#green">Green</a></li> 
    <li><a data-toggle="tab" href="#blue">Blue</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="red"> 
     <h1>Red</h1> 
     <p>red red red red red red</p> 
    </div> 
    <div class="tab-pane" id="orange"> 
     <h1>Orange</h1> 
     <p>orange orange orange orange orange</p> 
    </div> 
    <div class="tab-pane" id="yellow"> 
     <h1>Yellow</h1> 
     <p>yellow yellow yellow yellow yellow</p> 
    </div> 
    <div class="tab-pane" id="green"> 
     <h1>Green</h1> 
     <p>green green green green green</p> 
    </div> 
    <div class="tab-pane" id="blue"> 
     <h1>Blue</h1> 
     <p>blue blue blue blue blue</p> 
    </div> 
</div> 

私がタブ "オレンジ"上にマウスを置くと、リンク - localhost/projects /＃orangeが見えます。

ホームページからプロジェクトページとオレンジ色のタブにアクセスしたいが、このリンクを使用するとlocalhost/projects /と最初のタブ（この場合は赤色）のみが開きます。

私の質問は、ページの外側から「nav-tab」にアクセスできるようにする方法です。

ありがとうございます。

Answer 1

プロジェクトページを読み込むときには、まず2つのことを行う必要があります。まず、URLを読み、ユーザーが開いたタブを取得します。次に、タブが開いていることを示します（残りを閉じます）。

あなたはURLを読んで、最初の部分を行うことができ、document.location.hash

そして第二にとJavaScriptでは、あなたがしたいタブを開いて、（「ショー」）ブートストラップ法]タブを呼び出すことによって行われます。それは他のものを閉じます。説明を参照at Bootstrap documentation

@ZimSystemは非常に明確な方法で前の質問に答えました：https://stackoverflow.com/a/31003280/1414176。私はここで彼のコードをコピー

：

var hash = document.location.hash; 
if (hash) { 
    $('.nav-tabs a[href='+hash+']').tab('show'); 
} 

// Change hash for page-reload 
$('.nav-tabs a').on('shown.bs.tab', function (e) { 
    window.location.hash = e.target.hash; 
}); 

ZimSystemの第二部は、開口部@タブイベントが発生した後、URLをきれいにすることです。

： あなたはより良いコードin this other SO answerを持っています。それはscrollTo問題も解決します。

// Javascript to enable link to tab 
var hash = document.location.hash; 
var prefix = "tab_"; 
if (hash) { 
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show'); 
} 

// Change hash for page-reload 
$('.nav-tabs a').on('shown.bs.tab', function (e) { 
    window.location.hash = e.target.hash.replace("#", "#" + prefix); 
});