我正在使用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>
但单击选项卡时,它仍会滚动到内容。我很茫然,任何帮助都会非常感激。
答案 0 :(得分:0)
在this answer的帮助下整理解决方案。
问题似乎源于MixPanel处理跟踪链接的方式。它拦截点击操作,执行一些跟踪操作,然后手动将浏览器定向到它应该去的位置。这通常很好,但是在单击内容选项卡时,Foundation会尝试禁用默认操作。然后MixPanel出现并忽略它,无论如何都将浏览器发送到链接,导致滚动问题。
禁用链接跟踪完全解决了这个问题,但这也意味着我们正在收集更少的有用数据。所以我四处寻找一种方法来禁用页面内链接的链接跟踪。这就是上面的答案派上用场的地方,因为它是一个简洁的小函数,允许使用jQuery选择器来确定要跟踪的链接。
我使用提供的delegate_links
方法,而不是标准的链接跟踪设置:
mixpanel.delegate_links(document.body, 'a:not([href^=#])', 'Clicked Link');
忽略以#
开头的所有链接,因此它会禁用对页内链接的跟踪。正常链接按原样跟踪,但特定于标签的链接不再触发MixPanel,浏览器不再滚动到单击内容。