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

发布于 2024-12-10 08:14:35 字数 1449 浏览 0 评论 0原文

我的网站上有 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>

但是，当我单击页面底部的第二个链接时，它确实打开

 标记，但随后跳转到顶部页面。有没有办法阻止当我点击它时跳到页面顶部？

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

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

原文

I have 2 basic Show / Hide links on my website which work great.

Here is my 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>

However, when I click the 2nd link at the foot of the page it does open the <pre> tag , but then jumps to the top of the page. Is there a way to stop this from then jumping to the top of the page when I click it?

I'd prefer if it just showed the box and never jumped to the top.

Many thanks for any help with this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

命硬 2024-12-17 08:14:35

或者从标记中删除 href="#"

回复收藏 0 原文

贩梦商人 2024-12-17 08:14:35

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

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

回复收藏 0 原文

七七 2024-12-17 08:14:35

正如我刚刚从我的问题中了解到的，我或多或少遇到了同样的问题，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 时它仍然可以工作。

As I just learned from my question, where I had more or less the same problem, return false; is the simple minded solution. It works, but it can also prevent other code from running. The explanation is to find here in this wonderful tutorial.

Most likely you want to use something like

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

It basically stops/prevents the browser to do the default action, which is linking to itself when using # as href. Return false also stops following scripts from working if in the same handler. But the tutorial explains this way better :)

In your case it would be

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

That's propably the best solution if you want to use links. Using buttons would be the other solution, but that restricts you in some ways. Plus, you could (read:should) keep the a and give it a real href to the content you want to display, that way it will still work when javascript is disabled on the client.

回复收藏 0 原文