防止jquery显示/隐藏div转到页面顶部

以下脚本适用于我单击链接并隐藏可能显示的其他任何其他显示某个div（以便一次只显示一个）。但是，点击链接时，脚本也会显示在顶部。我怎么能这样说。防止jquery显示/隐藏div转到页面顶部

代码：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function(){ 

$('a').click(function() { 
var divname= this.name; 
$("#"+divname).show("slow").siblings().hide("slow"); 
}); 

}); 
</script> 
</head> 
<body> 


<ul> 
<li><a href="#" name="div1" >Show div1</a></li> 
<li><a href="#" name="div2" >Show div2</a></li> 
<li><a href="#" name="div3" >Show div3</a></li> 
<li><a href="#" name="div4" >Show div4</a></li> 
</ul> 

<div> 

<div id="div1" style="display:none"> 
This is div1 
</div> 

<div id="div2" style="display:none"> 
This is div2 
</div> 

<div id="div3" style="display:none"> 
This is div3 
</div> 

<div id="div4" style="display:none"> 
This is div4 
</div> 

</div> 

</body> 
</html>

来源

2011-04-02 Joseph

的原因是在你的HREF中的#。只需使用return false;作为您的点击处理程序中的最后一条语句即可防止出现这种情况。

来源

2011-04-02 09:00:43 nfechner

@Joseph：......因为下面的链接是一个链接的默认行为时点击，这你不取消。要么做'return false;'或者使用['Event＃preventDefault']（http://api.jquery.com/event.preventDefault/）。 – 2011-04-02 09:03:36

看这里jQuery event.preventDefault

来源

2011-04-02 09:05:55 AEMLoviji

3210

来源

2011-04-02 09:07:21 Dormouse

同时使用e.preventDefault()和return false;安全

来源

2011-04-02 09:16:30

我还没有找到一个解决方案，这一点，你必须完全避免虚假的回报，因为这打破了无障碍。

当您单击链接时，焦点位于目标div上，因此如果您使用键盘，则将浏览您选择的div。

使用返回false意味着焦点位于页面顶部，因此用户必须每次都在整个页面上打开标签，才能到达他们想要的位置。

我会张贴这个作为对其他答案的答复，但我看不到任何方式来做到这一点。

来源

2013-09-06 10:52:14 wcndave

使用event.preventDefault();后$('a').click(function()

这将是这样的：

<script> 
$(document).ready(function(){ 
$('a').click(function() { 
event.preventDefault(); 
var divname= this.name; 
$("#"+divname).show("slow").siblings().hide("slow"); 
}); 
}); 
</script>

来源

2014-08-18 14:00:39 user2787009

防止jquery显示/隐藏div转到页面顶部

回答

相关问题