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

Question

从外部链接 Go to anchor链接到标签内容中的锚点。需要在所有页面/模板中将脚本添加为全局文件。我所拥有的例子I have so far。

点击<a goto="stuff" href="#test">Go to stuff</a> /后面的 第三个​​标签 。

jsfiddle

Answer 1

问题是$（window.location.hash）的计算结果为$（'＃test'），因此它会查找ID =“test”的元素。您的网页上不存在此类元素。

使用这样的链接：

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

通常表示您要转到标有锚名称=“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
});