理解<a href="#!“

Question

在单击#在href属性中的链接后，我正在寻找一种防止被带到页面顶部的方法：

<a href="#" onclick="foobar()">click me</a>

然后我发现了一个简单的解决方案，将#转换为#!

<a href="#!" onclick="foobar()">click me</a>

例如，可以使用jQuery在线提供各种其他解决方案：

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

最后，我最喜欢#!，因为它是如此干净的，但是我在任何地方都找不到任何关于在代码行中插入!时实际发生了什么的文档。

问题：

#!实际上是如何导致html代码的呢？这是一种防止将用户带到页面顶部的默认操作的好方法，还是该方法由于其他原因而不好？我担心的是，它可能是一种与某些浏览器不兼容的讨厌的方法。

Answer 1

#!实际上是如何导致html代码的呢？

它告诉浏览器，当单击该链接时，它应该将页面滚动到锚点!。因为页面上没有这样的锚点，所以页面不会移动。(从技术上讲，您可以在页面上有一个名称为!的锚，!是一个非常有效的HTMLid值。是的，just...you可能不知道。)

通过将id值分配给元素(或使用过时的<a name="...">...</a>构造)在页面上创建锚；带有片段标识符(#后面的位)的href告诉浏览器加载资源(在您的示例中，它是已加载的当前页面)，然后向下滚动到该锚点。例如，如果页面上有<div id="foo">...</div>，那么导航到页面上的#foo，浏览器就会向下滚动，这样div就会显示出来。当你提供一个不存在的锚，滚动是不做的。