JavaScript-点击链接后，页面返回顶部

Question

这很麻烦，因为您必须向下滚动到原来的位置。 有人可以告诉我这种行为是什么。

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

HTML

<a href="#" onclick="toggle_visibility('foo');">School Area</a>
<div id="foo" style="display: none;">...</div>

Answer 1

发生这种情况是因为href="#"告诉浏览器单击链接时跳至页面顶部。

您可以通过从onclick属性处理程序返回false来阻止该默认操作：

<a href="#" onclick="toggle_visibility('foo');return false;">School Area</a>

---

但是，当您使用jQuery时，请考虑动态附加该事件处理程序（甚至使用事件委托），然后使用preventDefault ：

<a href="#" class="toggle-vis" data-visibility="foo">School Area</a>

然后是一个委托处理程序：

$(document.body).on("click", ".toggle-vis", function(e) {
    e.preventDefault();
    toggle_visibility(this.getAttribute("data-visibility"));
});

请注意data-visibility属性如何控制我们切换的内容。

---

您会看到有人告诉您更改此行：

toggle_visibility(this.getAttribute("data-visibility"));

至

// Only do this if you understand what `data` does
toggle_visibility($(this).data("visibility"));

但是data 不仅是data-*元素的访问者，它的作用更多（更少）。 如果您不需要可设置的功能，则无需将元素包装在jQuery实例中并调用data. 但是，如果您喜欢More jQuery™：

toggle_visibility($(this).attr("data-visibility"));

也可以。

Answer 2

这是由于# 。 将此添加到href ：

<a href="javascript:void(0)"></a>

Answer 3

<a>元素的默认行为是navigation/redirection

使用e.preventDefault()阻止默认操作

 function toggle_visibility(e, id) { e.preventDefault(); var e = document.getElementById(id); if (e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 

 <a href="#" onclick="toggle_visibility(event,'foo');">School Area</a> <div id="foo" style="display: none;">...</div> 

Answer 4

这是您可以使用的此元素的默认行为

在href使用javascript:void(0)避免其行为。

<a href="javascript:void(0)" onclick="toggle_visibility('foo');">School Area</a>

要么

在函数中使用preventDefault()以防止其默认行为执行。

function toggle_visibility(e, id) {
   e.preventDefault();
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

Answer 5

您也可以从

<a href="#" onclick="toggle_visibility('foo');">School Area</a>

至

<a style="cursor:pointer;text-decoration:underline;color:blue"
  onclick="toggle_visibility('foo');"
>School Area</a>