jQuery中显示/隐藏函数的问题.跳到文档的顶部

Issue with Show/Hide function in jQuery. Jumps to top of document

本文关键字：问题 文档 顶部 函数 显示 隐藏 jQuery      更新时间：2023-09-26

我的网站上有2个基本的显示/隐藏链接，效果很好。

这是我的HTML: 
<!DOCTYPE html>
<html lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://codylindley.com/blogstuff/js/jquery/jquery-base.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("input.buttonAsize").click(function(){ alert($("div.contentToChange").find("p").size()); });
    $("a.codeButtonA").click(function(){$("pre.codeA").toggle()});
    $("input.buttonBsize").click(function(){ alert($("div.contentToChange").find("p").size()); });
    $("a.codeButtonB").click(function(){$("pre.codeB").toggle()});
});
</script>
<style type="text/css">
pre {
background: white;
overflow: auto;
display:none;
}
</style>
</head>
<body>
    <a href="#" class="codeButtonA">Show / Hide</a>
    <pre class="codeA">
    test message 1
    </pre>
<div style="background:green;margin-top:1000px">
    <a href="#" class="codeButtonB">Show / Hide</a>
    <pre class="codeB">
    test message 2
    </pre>
</div>
</body>
</html>

然而，当我单击页面底部的第二个链接时，它确实打开<pre>标记，但随后跳转到页面顶部。当我点击它时，有没有办法阻止它跳转到页面顶部?

我希望它只显示盒子，而不要跳到顶部。

非常感谢您的帮助

或者将href="#"从<A>标签中移除

$("input.buttonAsize").click(function(e){
    e.preventDefault();
    alert($("div.contentToChange").find("p").size());
});
$("a.codeButtonA").click(function(e){
    e.preventDefault();
    $("pre.codeA").toggle();
});
$("input.buttonBsize").click(function(e){
    e.preventDefault();
    alert($("div.contentToChange").find("p").size());
});
$("a.codeButtonB").click(function(e){
    e.preventDefault();
    $("pre.codeB").toggle()
});

正如我刚刚从我的问题中了解到的，我或多或少有同样的问题，return false;是简单的解决方案。它可以工作，但它也可以阻止其他代码运行。在这个精彩的教程中可以找到解释。

很可能你想使用像

这样的东西
$("a").click(function(event) {
    // your custom code
    event.preventDefault();
});

它基本上停止/阻止浏览器做默认动作，当使用#作为href时链接到自己。如果在同一个处理程序中，返回false也会停止后续脚本的工作。但是这个教程解释得更好:)

在你的例子中应该是

$("a.codeButtonB").click(function(event){
    $("pre.codeB").toggle();
    event.preventDefault();
});

如果你想使用链接，这可能是最好的解决方案。使用按钮是另一种解决方案，但这在某些方面限制了你。另外，你可以(读:应该)保留a，并给它一个真正的href到你想要显示的内容，这样当javascript在客户端被禁用时，它仍然会工作。

将return: false;添加到您的click事件中

不要使用a标签的东西，不是真正的链接。使用button标签

将return false添加到两个函数中

相关文章：