從外部鏈接鏈接到選項卡式內容中的鏈接

Question

從外部鏈接Go to anchor鏈接到選項卡式內容中的錨點。腳本需要作爲跨所有頁面/模板的全局文件添加。我有這樣的例子I have so far。

點擊<a goto="stuff" href="#test">Go to stuff</a> /肚裏的第三個選項卡。

jsfiddle

Answer 1

的問題是，$（window.location.hash）的計算結果爲$（ '＃試驗'），所以它看起來爲與ID = 「測試」 的元素。這個元素不存在於你的頁面上。

使用像這樣的鏈接：

http://www.canberra.edu.au/media/test/bookmark.html/#test

通常會表明您想要去到標有錨名稱=「測試」的內容。

在您的例子我至少可以看到兩個錨具有相同名稱的屬性：

<a name="test"></a> 

這是錯誤的 - 錨名稱必須是唯一的：

http://www.w3.org/TR/html401/struct/links.html#idx-anchor-4

所以一旦你解決這有一個唯一的錨名稱，然後你可以使用href而不是你的goto屬性。 這也是一個好主意，同時使用名和ID：

<a id="test" name="test"></a> 

這將使$（window.location.hash）正常工作。

所以現在這應該激活正確的標籤：

var $targetAnchor = $(window.location.hash); 
tabId = $targetAnchor.closest('.tab-content').attr('id'); 
$tabs.find('a[href=#' + tabId + ']').click(); 

，這應該滾動工作：

$('html, body').animate({ 
    scrollTop: $targetAnchor.offset().top 
});