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

Question

从外部链接链接 到选项卡式内容中的锚点转到锚点。脚本需要作为全局文件添加到所有页面/模板中。到目前为止，我所拥有的示例。

单击<a goto="stuff" href="#test">Go to stuff</a>/ 转到第三个选项卡。

score 0 · Accepted Answer

问题在于 $(window.location.hash) 的计算结果为 $('#test')，因此它会查找 ID="test" 的元素。您的页面上不存在此类元素。

使用这样的链接：

通常会表明您要转到标有锚名称 =“测试”的内容。

在您的示例中，我可以看到至少两个具有相同名称属性的锚点：

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

这是错误的 - 锚名称必须是唯一的：

因此，一旦您解决了这个问题并拥有了唯一的锚名称，您就可以使用 href 代替 goto 属性。同时使用name和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
});

1 回答 1