首页 文章

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

提问于
浏览
1

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

我想要深层链接,所以我把属性data-deep-link = true . 这样可以正常工作,但由于不同标签的内容长度不同,因此切换标签时网站会上下跳动 .

有没有办法允许深度链接而无需滚动到Foundation 6中的内容?

(我读到这可能是基金会5,使用scroll_to_content:false,但我没有找到任何关于基金会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能够使用自定义属性(例如 data-tab-id 而不是 id ,也由浏览器解释),那就没问题了 .

1 回答

  • 0

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

相关问题