理解<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代码呢？这是防止将用户置于页面顶部的默认操作的好方法,还是这种方法因其他原因而不好？我担心的是它可能是一种与某些浏览器不兼容的hacky方法.

Answer 1

究竟是什么#!导致html代码呢？

它告诉浏览器,当点击该链接时,它应该将页面滚动到锚点!.由于页面上没有此类锚点,因此页面不会移动.(从技术上讲,你可以!在页面上有一个带名字的锚点[ !是一个非常有效的HTML id值].它只是......你可能没有.)

您可以通过id为元素赋值(或使用过时的<a name="...">...</a>构造)在页面上创建锚点; href带有片段标识符(后面的位#)的s 告诉浏览器加载资源(在您的示例中,它是已加载的当前页面),然后向下滚动到该锚点.因此,例如,如果您<div id="foo">...</div>在页面上,导航到#foo该页面,浏览器将向下滚动以显示该div.当您提供不存在的锚时,不会进行滚动.