从外部链接链接到选项卡式内容中的链接

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 
});