跳轉到特定的標籤從引導的導航，選項卡選擇其他選項卡

我使用的是引導的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 Tabs: Go to Specific Tab on Page Reload or Hyperlink下面的代碼：

// 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: How to truly reload a site with an anchor tag?解決方案：

window.location.reload(true);

然而，這每一次我在選項卡上單擊時間結束了在重載，另外它仍然沒有加載home標籤，當點擊錨時。

因此，如何從另一個選項卡跳到給定的id？

來源

2013-03-12 cherrun

你可能被你提到的其他答案置於錯誤的腳上......從同一頁面內改變標籤（無論你是否在另一個標籤中）是相當簡單的：你可以爲此，請使用基本引導程序tab navigation Javascript。

首先改變你的HTML有點：添加一個id你<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。

來源

2013-03-12 15:27:21 Marijn

給出的答案

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

也可以用來做一個JavaScript軟件跳轉到一個特定的標籤。假設你想通過URL跳轉到一個特定的標籤開始：

http://myDomain/myApp#tabSomewhere

你可以想象一下就可以了（你需要做一些額外的編碼）。假設你的第一頁上tabHome（你做出積極與「活動」類當您嘗試使用使用你的JavaScript刪除從tabHome活動類返回到該頁面。

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

來源

2017-10-06 11:16:33 Harm

跳轉到特定的標籤從引導的導航，選項卡選擇其他選項卡

回答

相關問題