锚标记中的 href="###" 有什么用?

What is the use of href="###" in an anchor tag?

我在一些专业开发人员的项目中看到了这些代码行:

<a href="###">
    ...
</a>

三个#而不是一个有什么用?

我认为这与 <a href="#">Go to link</a> 那个人只是用了三个“###”而不是一个“#”是一样的。如果需要,我们可以使用更多#

当您希望锚标记不更改 href 时,通常会这样写。例如,如果您想稍后在其上附加一个事件。

使用多少 # 并不重要。 href='#' 点击后会跳转到页面顶部。

我的首选方式是 <a href="javascript:void(0);"。这样一来,点击什么都不做,而不是向上跳转页面。

作为,它是href="#"技巧的变体...

目标

所以,解释一下这个技巧。诀窍是解决这样一个事实,即如果锚标记具有 link 的目标(请参阅此 example),则它们仅呈现为 links。目标是创建一个 link, 看起来 像 link,但实际上不会去任何地方。

工作原理

href="#" 习语利用了这样一个事实,即锚可以使用 href="#{other element identifier}]" 符号将特定元素指定为目标。当您执行此操作时,浏览器将 不会 重定向或重新加载页面,而是滚动到该元素。因此,当您指定 href="#" 时,您实际上是在告诉浏览器这是一个 link,但由于没有有效的目标元素,请在单击它时不要执行任何操作。

注意:说 href="#mybogusid" 也同样有效,但是您会看到 url 后面附加了#mybogusid。恶心。

TL;DR 全部:<a href="###"> 只是一种让浏览器像 link 一样呈现锚标记但不导航的方法单击任意位置。

关于“锚标签”的第一件事...

### 的这种用途特别是为了创建一个不会去任何地方的链接,为此 href 属性必须有一个值。请阅读 href W3C spec 页面以获取更多信息。

浏览器呈现元素的默认样式,并将更改没有 href 属性 的锚标记的默认样式。相反,它将被视为常规文本。它甚至改变了浏览器对元素的行为。悬停没有 href 属性 的锚点时,将不会显示状态栏(屏幕底部)。因此,最好的做法是在锚点上使用占位符 href 值,以确保将其视为超链接。

我经常看到 <a href="#"><a href="##">,超链接中的主题标签 - # 指定 html 元素 ID,window 应该滚动。

href="#some_id" 将滚动到当前页面上的某个元素,例如 <div id="some_id">.

href="//example.com/#some_id" 会转到 example.com 并滚动到该页面上的 ID。 href="#" 没有指定 id 名称,但有一个相应的位置 - 页面顶部。单击带 href="#" 的锚点会将滚动位置移动到顶部。

因此,当您使用 <a href="###"> 时,这会创建一个链接,但它不会去任何地方。您可以使用 "##","###" 和更多主题标签创建链接,例如 “超链接”,但它们不会带您去任何地方。

我的结论:

So, what is the use of it?

当您需要一个无处可去的超链接时,您可以使用它。只是告诉浏览器将样式更改为锚标记。

Check this JSFiddle demo

当我有按钮和 js 单击事件时,它非常有用。使用“#”它会在我每次按下按钮时滚动到顶部,但是使用“###”它会根据需要留在原位!