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="#"告诉浏览器在点击链接时跳转到页面顶部。

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

<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.但如果您更喜欢更多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

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

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

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

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

5 个答案: