Question

我的网站上有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>标记，但随后会跳转到页面顶部。当我点击它时，有没有办法阻止它跳到页面顶部？

我更喜欢它只是展示了盒子而从未跳到顶端。

非常感谢您对此的任何帮助。

Answer 1

或从href="#"代码

中删除<A>

Answer 2

$("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()
});

Answer 3

正如我刚从my question那里学到的，我或多或少有同样的问题，return false;是一个简单的解决方案。它可以工作，但它也可以防止其他代码运行。解释是在这里找到wonderful tutorial。

很可能你想使用像

这样的东西

$("a").click(function(event) {
    // your custom code
    event.preventDefault();
});

它基本上会停止/阻止浏览器执行默认操作，即使用#作为href时链接到自身。如果在同一个处理程序中，返回false也会停止跟踪脚本的工作。但教程更好地解释了这一点：）

在你的情况下，它将是

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

如果您想使用链接，这可能是最佳解决方案。使用按钮将是另一种解决方案，但这在某些方面会限制您。另外，您可以（读取：应该）保留a并为您要显示的内容提供真正的href，这样在客户端禁用javascript时它仍然有用。

Answer 4

将return: false;添加到您的click个活动中。

Answer 5

不要将a标签用于非真正链接的内容。使用button标记。

Answer 6

将return false添加到这两个函数中。

在jQuery中显示/隐藏功能的问题。跳到文档顶部

6 个答案: