Question

我正在使用Foundation 5.5.3，而且我对内容标签有严重问题。我已经尝试了所有我能想到的东西，但出于某种原因，只要用户点击选项卡，它就会将页面向下滚动到内容。我没有使用深层链接，因为我知道深层链接/滚动到内容存在一些问题。

以下是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处理跟踪链接的方式。它拦截点击操作，执行一些跟踪操作，然后手动将浏览器定向到它应该去的位置。这通常很好，但是在单击内容选项卡时，Foundation会尝试禁用默认操作。然后MixPanel出现并忽略它，无论如何都将浏览器发送到链接，导致滚动问题。

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

我使用提供的delegate_links方法，而不是标准的链接跟踪设置：

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

忽略以#开头的所有链接，因此它会禁用对页内链接的跟踪。正常链接按原样跟踪，但特定于标签的链接不再触发MixPanel，浏览器不再滚动到单击内容。

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

1 个答案: