使用基础选项卡时禁用滚动到内容

Question

我使用的是 Foundation 5.5.3，但内容选项卡存在严重问题。我已经尝试了所有我能想到的方法，但出于某种原因，每当用户单击选项卡时，它都会将页面向下滚动到内容。我没有使用深度链接，据我所知，深度 linking/scroll 到内容存在一些问题。

下面是 html 的示例：

<ul class="tabs" data-tab data-options="scroll_to_content: false">
    <li class="tab-title active"><a href="#tab1">Tab 1</a></li>
    <li class="tab-title"><a href="#tab2">Tab 2</a></li>
</ul>
<div class="tabs-content">
    <div id="tab1" class="content active">
        <p>Tab 1 content</p>
    </div>
    <div id="tab2" class="content">
        <p>Tab 2 content</p>
    </div>
</div>

但是当点击标签时它仍然滚动到内容。我很茫然，任何帮助将不胜感激。

Answer 1

在 this answer 的帮助下制定解决方案。

问题似乎源于 MixPanel 处理跟踪 link 的方式。它拦截点击动作，做一些跟踪工作，然后手动将浏览器定向到它应该去的地方。这通常没问题，但 Foundation 会尝试禁用单击内容选项卡时的默认操作。然后出现 MixPanel 并忽略它，将浏览器发送到 link，导致滚动问题。

禁用 link 跟踪可以完全解决问题，但这也意味着我们收集的有用数据要少得多。所以我四处寻找一种方法来禁用 link 页内 link 跟踪。这就是上面的答案派上用场的地方，因为它是一个简洁的小函数，允许使用 jQuery 选择器来确定要跟踪的 links。

我没有使用标准的 link 跟踪设置，而是使用了提供的 delegate_links 方法，例如：

mixpanel.delegate_links(document.body, 'a:not([href^=#])', 'Clicked Link');

这会忽略任何以 # 开头的 link，因此它会禁用页内 link 的跟踪。正常 link 会按原样进行跟踪，但特定选项卡 link 不再触发 MixPanel，并且浏览器不再在单击时滚动到内容。

使用基础选项卡时禁用滚动到内容

Disable scroll to content when using Foundation Tabs

javascript

mixpanel

zurb-foundation