jQuery Tabs - 防止锚点在点击时将页面滚动到顶部答案

【问题标题】：jQuery Tabs - Preventing an anchor from scrolling the page to the top on clickjQuery Tabs - 防止锚点在点击时将页面滚动到顶部
【发布时间】：2013-12-24 10:45:23
【问题描述】：

我设置了一个小提琴来演示我的问题 (http://jsfiddle.net/PR2Yn/)。我尝试了阻止功能，但无济于事。

<div id="horizontalTab">
<ul class="resp-tabs-list">
    <li> <a href="#" class="accordionNav residents" tabindex="0">Residents<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav business" tabindex="0">Business<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav visitors" tabindex="0">Visitors<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav wealden247" tabindex="0">Wealden 24/7<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav payforit" tabindex="0">Pay for it<div class="tri"></div></a> </li>
    <li> <a href="#" class="accordionNav applyforit" tabindex="0">Apply for it<div class="tri"></div></a> </li>
    <li> <a href="#" class="accordionNav reportit" tabindex="0">Report it<div class="tri"></div></a> </li>
    <li> <a href="#" class="accordionNav planning" tabindex="0">Planning<div class="tri"></div></a> </li>
    <li> <a href="#" class="accordionNav bins" tabindex="0">Bins<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav council" tabindex="0">Your Council<div class="tri"></div></a> </li> 
</ul>

具体来说，页面底部的新闻标签在被点击时会跳转到页面顶部。只要您没有向下滚动就可以了，但是如果您向下滚动会导致问题，因为您必须不断地找到您所在的位置。

【问题讨论】：

标签： javascript jquery tabs anchor

【解决方案1】：

你需要定义

href='javascript:void(0);'

而不是

 href='#'

在围绕新闻图像和内容的所有锚标签中。

如果你在anchor中定义href='#'，它会在你页面的url末尾添加#并向上跳转。

【讨论】：

【解决方案2】：

看看你的小提琴，你遇到的问题似乎不是通常的跳转/滚动（由浏览器响应 onclick 事件处理程序），而是选项卡的问题：打开的每个选项卡，之前点击过的一个（即使点击关闭它）也会打开。您可以通过执行以下操作来查看：

1) Click on "Residents" tab to open it;
2) Click on it again to close it;
3) Now scroll down and click on another tab (such as "Apply for it");
4) Then you will be scrolled up because, in fact, "Residents" is also reopened.

我认为这是由您的 javascript 代码或 HTML 中的某些问题引起的，但我找不到任何问题。在一次测试中，我删除了你的大部分 javascript 和 HTML，只维护了一个非常基本的 easytabs 调用，问题仍然存在。

所以我认为问题可能出在 easyResponsiveTabs.js 插件本身。所以我改变了外部资源，使用“官方”easyResponsiveTabs example page使用的那个，问题就消失了。您可以在此处查看您的标签页：http://jsfiddle.net/8gWe9/

总之，看起来问题出在您使用的 easyResponsiveTabs.js 上，尽管我没有详细检查过。这可能是由于使用旧版本造成的，但也可能是由于您的网络服务器没有正确传递 .js 文件的问题。

【讨论】：