href ="#"返回页首 - 预防？

Question

我有一个页面包含一些jQuery函数.页面上的HTML看起来像这样:

<a href="#" class="service">Open</a>

当我单击"打开"按钮时,隐藏的面板会滑出.jQuery本身效果很好但是当我点击按钮时它也会把我带到页面顶部.

这是defualt行为,我如何防止每个人href="#"把我带到页面顶部.

注意:我可以添加id并告诉href指向该ID.我不想出于各种原因(包括添加不必要的代码)这样做.

Answer 1

<a href="#!" class="service">Open</a>

我认为这是一个锚语法.滚动到id ="!"的元素但是id ="!"的元素文档中不存在,浏览器不滚动.https://www.w3.org/TR/html4/struct/links.html#h-12.2.1 (5认同)
自1996年以来一直在入侵HTML。仍然需要学习。谢谢 (3认同)
哇！最佳解决方案！非常感谢。我希望我能投票 10 次！ (2认同)
使用代码嗅探器（WCAG2AA 标准）导致问题：未找到 ID 为“！”的项目 (2认同)

Answer 2

在事件处理程序中,添加e.preventDefault();(假设e是保存事件的变量的名称):

$('.service').click(function(e) {
    e.preventDefault();
});

@bafromca:绝对不是.调用`preventDefault`就足够了; 顾名思义,它可以防止发生默认操作(跟随锚点并转到页面顶部).`return false`也是这样做的,也相当于调用`stopPropagation`,顾名思义,它阻止事件传播到父元素; 但如果你想要做的就是阻止浏览器滚动到页面顶部,那么就不需要*返回false. (3认同)

Answer 3

<a href="#" onclick="return false;" class="service">Open</a>

要么

$(document).ready(function()
{ 
   var a = $(".service");
   a.click(function()
   {

       return false;

   });
});

要么

$(document).ready(function()
{ 
   var a = $(".service");
   a.click(function(e)
   {

       e.preventDefault();

   });
});

要么

<a href="#" onclick="event.preventDefault();" class="service">Open</a>