anchor - href="#" 转到页面顶部 - 阻止？

Question

我有一个带有一些 jQuery 函数的页面。页面上的 HTML 如下所示：

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

当我单击“打开”按钮时，一个隐藏的面板会滑出。jQuery 本身运行良好，但是当我单击按钮时，它也会将我带到页面顶部。

这是默认行为吗？如何防止每个href="#"人将我带到页面顶部。

注意：我可以添加 id 并告诉 href 指向该 ID。由于各种原因（包括添加不必要的代码），我不想这样做。

score 120 · Accepted Answer

120

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

于 2016-03-29T17:33:09.393 回答

score 72 · Accepted Answer

在您的事件处理程序中，添加e.preventDefault();（假设e是保存事件的变量的名称）：

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

score 26 · Accepted Answer

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

score 0 · Accepted Answer

$('service').click(function() {
<your code>
return false;
});

return false覆盖“a”标签的标准行为，并在单击时停止浏览器返回页面顶部。

4 回答 4