避免在 Foundation 6 中使用带有深层链接的选项卡滚动到内容

Posted 2023-02-19

【中文标题】避免在 Foundation 6 中使用带有深层链接的选项卡滚动到内容

【英文标题】：Avoid scroll to content using Tabs with deep links in Foundation 6

【发布时间】：2018-04-11 03:42:06

【问题描述】：

我正在使用 Foundation 6 的标签，如下所述：https://foundation.zurb.com/sites/docs/tabs.html

我想要深度链接，所以我把属性 data-deep-link=true。这很好用，但是由于不同选项卡的内容长度不同，因此在切换选项卡时网站会上下跳跃。

有没有办法在 Foundation 6 中允许深度链接而不滚动到内容？

（我读到 Foundation 5 可以做到这一点，scroll_to_content: false，但我没有找到任何关于 Foundation 6 的文档。）

为了解释更多，只需一个标签条目：

<ul class="tabs" data-tabs data-deep-link="true" data-deep-link-smudge="true" data-update-history="true">
    <li class="tabs-title is-active">
        <a href="#jumpToTab">link</a>
    </li>
</ul>

下面是标签内容容器：

<div class="tabs-content" data-tabs-content="device-manager-tabs">
    <div class="tabs-panel is-active" id="jumpToTab"></div>
</div>

从浏览器的角度来看，跳转到#jumpToTab 是正确的。但无论如何我都想避免它，保持 Foundation 的功能。如果 Foundation 能够使用自定义属性（例如 data-tab-id 而不是 id，它也会被浏览器解释），那就没问题了。

【参考方案1】：

尝试将data-auto-focus="false" 添加到您的标签容器中。

【讨论】：

谢谢，但不幸的是它不起作用。浏览器仍在尝试跳转到选定的锚点。从浏览器的角度来看这是正确的，但我想要基础功能而不跳转到锚点，尽管我在 url 中选择了它。