使用Bootstrap的nav-tabs從另一個選項卡跳轉到特定選項卡

Question

我使用Bootstrap的nav-tabs進行以下設置：

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="tabContent" class="tab-content">
  <div class="tab-pane active in" id="home">
    <form id="tab">
        <label>Name:</label>
        <input type="text" value="fooBar" class="input-xlarge">
    </form>
  </div>
  <div class="tab-pane fade" id="profile">
    <form id="tab2">
        <a href="#home">Home</a>
    </form>
  </div>
</div>

如您所見，我的profile選項卡中有一個鏈接，該鏈接指向第一個選項卡。 單擊錨點會更改URL欄中的URL，但不會跳轉到特定選項卡。

然后我注意到通常無法直接鏈接到選項卡，因此我在Twitter Bootstrap選項卡中添加了以下代碼：轉到頁面重新加載或超鏈接上的特定選項卡 ：

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 

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

現在我可以從其他地方鏈接到特定的選項卡，但不是，如果我在導航欄所在的同一頁面上。 重新加載頁面然后會跳轉到所需的選項卡，所以我想我可以強制重新加載頁面，使用Javascript的解決方案：如何真正重新加載帶有錨標記的網站？ ：

window.location.reload(true);

然而，每次單擊選項卡時，這都會重新加載，此外，當單擊錨點時，它仍然沒有加載home選項卡。

那么，我如何從另一個標簽跳轉到給定的id ？

Answer 1

您提到的其他答案可能會讓您誤入歧途......從同一頁面中更改標簽是非常簡單的（無論您是否在另一個標簽中）：您可以使用基本的引導程序標簽導航Javascript為此。

首先更改你的html：為你的<ul class="nav nav-tabs" id="myTab">..添加一個<ul class="nav nav-tabs" id="myTab">..然后添加一個鏈接到你的第二個標簽：

<div class="tab-pane fade" id="profile">
  <form id="tab2">
    <a href="#" id="gotohome">Jump to home tab (this works)</a>
...

並在您的文檔中添加以下內容：

$('#gotohome').click(function() {
  $('#myTab a[href="#home"]').tab('show');
});

jsFiddle的工作示例。

Answer 2

給出的答案

$('#myTab a[href="#home"]').tab('show');

也可用於使JavaScript軟件跳轉到特定選項卡。 假設您希望使用url跳轉到開始時的特定選項卡：

http://myDomain/myApp#tabSomewhere

你可以想象它會起作用（你需要做一些額外的編碼）。 假設您的第一頁位於tabHome（您使用'active'類激活了。當您嘗試使用javascript返回該頁面時，您必須使用以下命令從tabHome中刪除活動類：

$('li').removeClass('active');