Question

以下脚本适用于在单击链接并隐藏可能显示的任何其他内容时显示某个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>

Answer 1

原因是你的href中的#。只需使用return false;作为点击处理程序中的最后一个语句即可。

Answer 2

$('a').click(function (e) {
    e.preventDefault();

    var divname= this.name;
    $("#"+divname).show("slow").siblings().hide("slow");
});

Answer 3

看这里jQuery event.preventDefault

Answer 4

使用e.preventDefault()和return false;来确保安全

Answer 5

我还没有找到解决方法，你必须完全避免返回false，因为这会破坏可访问性。

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

使用return false意味着焦点位于页面顶部，因此用户必须每次都浏览整个页面，以便到达他们想要的位置。

我会将此作为对其他答案的回复发布，但我看不出有任何办法。

Answer 6

在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>

防止jquery show / hide div转到页面顶部

6 个答案: