57
4

7 回答 7

99

<a>代表锚

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

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

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

a[href]元素是一个链接（这就是它们:link在 css 中匹配的原因）。链接是可点击的。否则，没有该属性的a元素[href]只是可能放置链接的位置的占位符，并且不可点击，也不在页面的跳位顺序中。

如果您希望您的链接可通过键盘导航，这对于可访问性 ( 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>），您可以使用以下方法伪造 a <button>：

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

您需要侦听 和 的事件并keypress触发click事件。EnterSpace

保留标记

如果您要保留<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 链接会将用户带到页面上的适当内容。

一个无用的href

前任

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

如果您在 JavaScript 中阻止默认行为，并且不支持禁用 JS 的用户，则可以使用“dud”href 值将链接保持在跳动顺序并自动启用Enter以触发click事件。您应该[role="button"]在语义上添加<a>标签不再用作链接，而是用作按钮。

<a href="#" role="button">Some clickable text</a>
于 2012-06-21T19:04:57.910 回答
15

就我个人而言，我更喜欢使用href="javascript:void(null);", 为浏览器提供一个不会弄乱哈希的任何其他使用的 href。

我注意到无 href 链接的唯一区别是浏览器默认不会给它们加下划线，所以只需添加该样式就可以了。

于 2012-06-21T18:49:55.970 回答
1

我正在为 React 实现一个 HTML、CSS、JS 模板，这行代码非常适合我：

<a href={() => false}> Link </a>
于 2018-12-05T18:42:02.157 回答
1

我对 react js 也有同样的问题。

Line 273:  Links must not point to "#". Use a more descriptive href or use a button instead  jsx-a11y/href-no-hash

像这样删除我使用的错误

前 ：

 <a 
      href="#"
      className="banner-signup signup-btn envy-font-sans-bold"
      onClick={(e) => this.gonext()}
    >
     NEXT
    </a>

在 href="#" 的地方使用了 href="#/"

 <a 
      href="#/"
      className="banner-signup signup-btn envy-font-sans-bold"
      onClick={(e) => this.gonext()}
    >
     NEXT
    </a>
于 2020-07-07T05:17:57.823 回答
0

在 html 中使用

<a id="calendar" href="javascript:void(0)">
        <div class="icon-w">
          <div class="fa fa-calendar"></div>
        </div>
     <span>Calendar</span>
</a>
于 2021-05-26T06:22:32.783 回答
-1
于 2012-06-21T18:48:00.370 回答
-2

我遇到了这个问题，特别需要一个手风琴标题，<a>以便它可以被标记但不能被点击。如果没有href，这将无法工作，因此我将id 文本放在href 中的“#”之后，它似乎可以工作。它使链接可用于选项卡，但无法单击。

<a href="#${accordionGroup.id}"> Title </a>

输出为：

<a href="#acc234923"> Title </a>

于 2018-04-30T16:19:57.693 回答