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

Question

我设置了一个小提琴来演示我的问题（ 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>

具体来说，单击页面底部的新闻选项卡会跳至页面顶部。 只要您没有向下滚动就可以了，但是如果向下滚动会导致问题，因为您必须不断查找自己的位置。

Answer 1

您需要定义

href='javascript:void(0);'

代替

 href='#'

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

如果您在锚点中定义href ='＃'，它将在页面网址的末尾添加＃并跳转。

Answer 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 示例页面使用的外部资源来更改了外部资源，问题不再存在。 您可以在此处查看标签页： http : //jsfiddle.net/8gWe9/

总而言之，似乎问题出在您使用的easyResponsiveTabs.js，尽管我没有详细检查。 这可能是由于使用了旧版本引起的，也可能是由于Web服务器无法正确交付.js文件而引起的。