<a>脚本链接没有href ="#"

Question

我的Web应用程序使用了大量<a href="#">Perform client script action</a>用于编写脚本的锚链接(这是我10多年前作为Dreamweaver用户使用的习惯)现在我开始质疑这是否有必要.

我实际上并不知道为什么<a href="#">首先使用 - 我的猜测是href属性的存在导致浏览器应用:link和:visited简化样式表的psuedo类.它还使浏览器隐式应用cursor: pointer可能需要的属性.

我使用jQuery(在与MooTools短暂合作之后)并且链接也可以在没有href="#"属性和值的情况下工作,所以我应该完全删除属性并修改我的样式表来补偿:linkpsuedo类的删除吗？还有什么我可能会遗漏,href属性嵌入锚元素的任何类型的半文档伏都教？

Answer 1

<a> 代表锚

如果[href]在<a>元素上包含该属性,则它是指向某个位置的锚点,这意味着您可以转到新页面,当前页面的特定片段(因此#称为片段标识符)或特定的新页面的片段.

<a>[href]历史上,没有属性的元素被分配了一个[name]属性,该属性可以用作片段标识符的目的地.浏览器后来添加了对链接到任何项[id]属性的支持,现在这是链接到文档片段的首选方法.

这对于独立<a>元素意味着什么？

一个a[href]元件是一个链接(这就是为什么它们与匹配:link在CSS).链接是可点击的.没有属性的a元素[href]否则只是一个占位符,用于放置链接的位置,而不是可点击的,也不是页面的Tab键顺序.

如果您希望链接是键盘可导航的,这对于可访问性(WAI-ARIA)很重要,您需要执行以下操作之一:

• 将元素更改为 <button type="button">
• 保持[href]属性
• 添加[tabindex="0"]和其中一个[role="button"]或[role="link"](可能还有一些样式)

有关该[role]属性的更多信息可以在WAI-ARIA文档的角色模型部分找到.

更改标记

如果您没有理由保留该[href]属性,那么您可能也在使用一个<button>元素:

<button type="button">
        ^^^^^^^^^^^^^

该[type]属性用于使元素成为通用按钮,否则<button>将默认为[type="submit"],这可能是不可取的,因为它可能触发表单提交.

如果你不能使用a <button>(通常在内部标记必须包含a时发生<div>)你可以假装<button>使用:

<div role="button" tabindex="0">Some clickable text</div>

你需要监听keypress事件并触发click事件Enter和Space.

保持标记

如果要保留<a>元素及其[href]属性,则其值有多个选项.

一个真正的链接

防爆

• <a href="/some/location/for/users/without/js">
• <a href="#document-fragment">

如果您需要为禁用JS的用户提供支持,您也可以将它们指向一个不使用JS而执行等效功能的页面.

通过扩展,这还包括提供链接到同一文档内的内容的文档片段链接.例如,可切换区域可以标记为:

<a href="#more" class="toggleable">Read More</a>
<div id="more">Lorem ipsum dolor sit amet</div>

因此,对于JS,可以折叠和扩展区域,如果没有JS,链接将使用户访问页面上的相应内容.

一个dud href

防爆

• <a href="#">
• <a href="javascript:void(0)">
• <a href="about:blank">

如果您在JavaScript中阻止了幕后的默认行为,并且您不支持禁用JS的用户,则可以使用"dud"href值来保持链接处于Tabbing顺序并自动启用Enter以触​​发click事件.您应该添加[role="button"]语义上的<a>不再使用的标签为纽带,但作为一个按钮.

<a href="#" role="button">Some clickable text</a>

Answer 2

我个人更喜欢使用href="javascript:void(null);",给浏览器一个href,不会搞乱任何其他哈希的使用.

我注意到关于无href链接的唯一区别是浏览器默认情况下不会为它们加下划线,所以只需添加该样式即可.