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

Question

我正在使用 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，它也会被浏览器解释)，那就没问题了.

Answer 1

尝试将 data-auto-focus="false" 添加到您的选项卡容器中。