無法使用頁面外URL中的標識訪問選項卡

Question

在這種情況下，我在本地主頁和項目中有兩個頁面。

首頁 - 本地主機， 項目頁面 - 本地主機/項目/

的項目頁面已經NAV標籤從引導3：

<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 /和第一個選項卡，在這種情況下紅色。

所以我的問題是如何使「nav-tab」可以從頁面外部訪問。

在此先感謝。

Answer 1

當你加載你的項目頁面時，你需要做兩件事：首先，閱讀url並獲取用戶想要打開的標籤。其次，顯示該選項卡打開（並關閉其餘）。

您可以document.location.hash

而第二個要做的第一部分，讀取URL，在JavaScript中，打開你想要的標籤，通過調用Bootstrap方法選項卡（「秀」）完成。它關閉任何其他。查看解釋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); 
});