是否可以使用 CSS 使 HTML 锚标记不可点击/不可链接？

Question

例如，如果我有这个：

<a style="" href="page.html">page link</a>

有什么我可以用于 style 属性的东西可以使链接不可点击并且不会带我到 page.html 吗？

或者，我唯一的选择是不将“页面链接”包装在锚标记中吗？

编辑： 我想说明我为什么要这样做，以便人们能够提供更好的建议。我正在尝试设置我的应用程序，以便开发人员可以选择他们想要的导航样式类型。

因此，我有一个链接列表，其中一个始终处于当前选中状态，而其他所有链接均未选中。对于未选中的链接，我显然希望它们是普通的可点击锚标签。但是对于选定的链接，有些人希望该链接保持可点击状态，而另一些人则喜欢使其不可点击。

现在我可以轻松地以编程方式不在所选链接周围包装锚标记。但我想如果我总是可以将选定的链接包装成类似这样的东西会更优雅：

<a id="current" href="link.html">link</a>

然后让开发人员通过 CSS 控制链接样式。

原文由 Ryan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以使用这个 CSS：

 .inactiveLink {
   pointer-events: none;
   cursor: default;
}

然后将类分配给您的 html 代码：

 <a style="" href="page.html" class="inactiveLink">page link</a>

它使链接不可点击，并且光标样式为箭头，而不是链接所具有的手。

或在 html 中使用此样式：

 <a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

但我建议第一种方法。

原文由 Diego Unanue 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这对 CSS 来说不太容易，因为它不是一种行为语言（即 JavaScript），唯一简单的方法是在锚点上使用 JavaScript OnClick 事件并将其返回为 false，这可能是最短的代码你可以使用：

 <a href="page.html" onclick="return false">page link</a>

原文由 Karan K 发布，翻译遵循 CC BY-SA 3.0 许可协议