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

4

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

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

为什么要使用三个 # 而不是一个?

代码图片

5个回答

4

当你想要保持锚点标签的href不变时,通常会使用这种写法。例如,如果您想稍后附加事件。

无论您使用多少个#,点击href='#'都会使页面跳转到页面顶部。

我的首选方式是使用<a href="javascript:void(0);"。这样,单击不会发生任何事情,而不是将页面向上滚动。


3
正如Bhuiyan的回答所述,这是一种变体 href="#"技巧……

目标

因此,为了解释这个技巧。该技巧是为了解决锚点标签只有在有链接目标时才被渲染为链接的问题(参见这个示例)。目标是创建一个看起来像链接但实际上没有任何效果的链接。

它是如何工作的

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

注意:也可以有效地使用href="#mybogusid",但是您将在url中看到 #mybogusid。 不好看。

总之:TL;DR<a href="###">只是一种让浏览器呈现锚点标签像链接的方式,但在单击时不会导航到任何地方。


3

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

特别是在创建不指向任何地方的链接时,### 的使用需要有一个值为 href 属性。请阅读href W3C 规范页面以获取更多信息。

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

我经常看到 <a href="#"><a href="##">,哈希标记 - 在超链接中使用 # 指定应滚动窗口以到达的 HTML 元素 id。

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

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

因此,当您使用 <a href="###"> 时,这会创建一个链接,但它不会指向任何地方。您可以使用像 "##","###" 等哈希标记来创建类似于“超链接”的链接,但它们不会带您去任何地方。

我的结论:

那么,它有什么用途呢?

当您需要一个不指向任何地方的超链接时,您可以使用它。这只是告诉浏览器将样式更改为锚标签。

查看此 JSFiddle 演示


2
我认为这与那个人刚才使用的 <a href="#">前往链接</a> 是相同的,只是他用了三个"###"而不是一个"#". 如果需要,我们可以使用更多的#。

-2

当我有按钮和JS点击事件时,它非常有用。使用'#'每次按下按钮时都会滚动到顶部,但使用'###'则会停留在原地,正如所需!


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接