什么是href =“#”,为何使用它?

在许多网站上,我看到具备href="#"连接。 这是什么意思? 这有什么用途? javascript


#1楼

一般建立无序列表是为了将它们用做菜单,可是li列表项是文本。 由于列表li的项目是文本,鼠标指针会不会是一个箭头,而是一个“I形光标”。 用户习惯于单击某些东西时看到指向鼠标指针的手指。 使用锚标签, li标签a内部会致使鼠标指针更改成手指。 使用列表做为菜单时,手指要好得多。 html

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

若是该列表用于菜单,而且不须要连接,则不须要指定URL。 可是问题是,若是忽略href属性,则<a>标记中的文本将被视为文本,所以鼠标指针将返回到I光标。 I光标可能使用户认为菜单项不可单击。 所以,您仍然须要href ,但不须要指向任何地方的连接。 html5

您能够在菜单列表中使用不少divp标签,可是鼠标指针也将是它们的I光标。 java

您可使用许多彼此堆叠的按钮来得到菜单列表,可是列表彷佛更可取。 这可能就是为何在列表标签​​内的定位标签中使用指向无处的href="#"缘由。 程序员

您能够在CSS中设置指针样式,这是另外一种选择。 href="#"到无处可能只是设置某些样式的懒惰方式。 浏览器


#2楼

关于超连接:

锚标记- <a></a>的主要用途是做为超连接 。 这基本上意味着他们会将您带到某个地方。 超连接须要href属性,由于它指定了位置。 网络

杂凑:

超级连接中的井号( #指定了应将窗口滚动到的html元素ID。 less

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

href="//site.com/#some-id"将转到site.com并滚动到该页面上的ID。 网站

滚动到顶部:

href="#"没有指定ID名称,可是具备相应的位置-页面顶部。 单击带有href="#"的锚点会将滚动位置移到顶部。

看到这个演示。

根据w3文档,这是预期的行为

超连接占位符:

模板预览中的一个超连接占位符有意义的示例。 在模板的单页演示中,我常常看到<a href="#">所以anchor标记是一个超连接,但不会随处可见。 为何不将href属性留空? 空白的href属性其实是指向当前页面的超连接。 换句话说,它将致使页面刷新。 正如我所讨论的, href="#"也是超连接,而且会致使滚动。 所以,超连接占位符的最佳解决方案其实是href="#!" 这里的想法是但愿页面上没有id="!"的元素id="!" (是谁作的!?),所以超连接什么也没指-所以什么也没发生。

关于定位标记:

您可能想知道的另外一个问题是:“为何不仅关闭href属性?”。 我听到的一个常见答复是href属性是必需的,所以它应该“出如今”锚点上。 这是假的! 只有当锚其实是超连接时,才须要href属性! 从w3阅读此内容 。 那么,为何不将它留给占位符呢? 浏览器呈现元素的默认样式,并将更改不具备href属性的锚标记的默认样式。 相反,它将被视为常规文本。 它甚至能够更改浏览器有关元素的行为。 当鼠标悬停在没有href属性的锚点上时,状态栏(屏幕底部)将不会显示。 最好在锚点上使用占位符href值,以确保将其视为超连接。

请参阅此演示,演示样式和行为差别。


#3楼

正如其余一些答案所指出的那样, a元素须要href属性,而#用做占位符,但这也是历史产物。

来自Mozilla开发人员网络

href

这是定义超文本源连接的锚的惟一必需属性,但在HTML5中再也不须要。 省略此属性将建立一个占位符连接。 href属性指示连接目标,能够是URL或URL片断。 URL片断是一个名称,其前面带有井号(#),用于指定当前文档中的内部目标位置(ID)。

另外,按照HTML5 规范

若是a元素没有href属性,则该元素表示一个占位符,不然可能会放置一个连接(若是存在的话),该连接仅由元素的内容组成。


#4楼

将href =“#”用于空连接的问题在于,它会将您带到页面顶部,这可能不是您想要的操做。 为避免这种状况,对于较旧的浏览器或非HTML5文档类型,请使用

<a href="javascript:void(0)">Goes Nowhere</a>

#5楼

不幸的是, <a href="#">的最多见用法是懒惰的程序员,他们但愿可单击的非超连接javascript编码的元素的行为相似于锚点,但不能使它们添加cursor: pointer;:hover样式将其非超连接元素添加到类中,而且因为过于懒惰而没法将href设置为javascript:void(0);

问题是一个<a href="#" onclick="some_function();">或另外一个不可避免地以javascript错误结尾,而带有onclick javascript错误的锚点始终以其href结尾结尾。 一般,这最终会致使页面顶部使人讨厌的跳转,可是对于使用<base>的网站, <a href="#">被视为<a href="[base href]/#"> ,致使导航异常。 any logable errors are being generated, you won't see them in the latter case unless you enable persistent logs. 正在生成任何可记录错误,则在后一种状况下,除非启用持久日志,不然您将看不到它们。

used as a non-anchor it have its href set to javascript:void(0); 若是锚定元件用做一个非锚定它有其href设置javascript:void(0); degradation. 为了降级。

我只是浪费了两天时间来调试一个本应只是刷新页面的随机意外页面重定向,最后将其跟踪到引起<a href="#">的click事件的函数。 用javascript:void(0);替换# javascript:void(0); 修复。

星期一我要作的第一件事是清除全部<a href="#">实例的项目。

相关文章
相关标签/搜索