如何仅使用 css 来禁用链接？

在 CSS 中，虽然没有直接的属性可以完全“禁用”链接，但我们可以通过一些技巧来实现类似的效果。一种常见的方法是通过改变链接的行为，使其看起来和表现得像是被禁用的。以下是一些例子:

1. 改变颜色和去除下划线：可以将链接的颜色设置为与普通文本相同，并去除下划线，这样用户就不会认为它是一个可以点击的链接。

css
a.disabled {
  color: gray;
  text-decoration: none;
  pointer-events: none; /* 禁止鼠标事件 */
  cursor: default; /* 修改鼠标样式 */
}

1. 禁止鼠标事件 (pointer-events)：通过设置 pointer-events 属性为 none，可以禁止用户对链接执行鼠标相关的操作。

css
a.disabled {
  pointer-events: none;
  cursor: default;
}

1. 修改光标：通过将 cursor 属性设置成 default 或 not-allowed，可以让用户感觉链接不可被点击。

css
a.disabled {
  cursor: not-allowed;
}

使用这些 CSS 规则，你可以给链接添加 disabled 类，以实现视觉上的禁用效果：

html
<a href="https://example.com" class="disabled">不可点击的链接</a>

但要注意的是这些方法并不能真正阻止链接的点击事件；它只是在视觉上表现为禁用，并且阻止了鼠标事件。这意味着如果用户使用键盘导航到这个链接，还是可以通过按下回车键来激活链接的。如果需要从功能上完全禁用链接，可能还需要使用 JavaScript 或修改 HTML（例如去掉 href 属性）。

从这个解决方案：

shell
[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" aria-current="page">Link</a>

运行代码片段Hide results

展开片段

有关浏览器支持，请参阅https://caniuse.com/#feat=pointer-events。如果您需要支持 Internet Explorer，有一个解决方法；看到这个答案。

pointer-events警告：在 CSS 中对非 SVG 元素使用是实验性的。该功能曾经是 CSS 3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS 4。

.disabled { pointer-events: none; cursor: default; opacity: 0.6; }

shell
<a href="#" class="disabled">link</a>

运行代码片段Hide results

展开片段

CSS 只能用于改变某些东西的样式。使用纯 CSS 最好的办法就是完全隐藏链接。

您真正需要的是一些 JavaScript 代码。以下是您如何使用 jQuery 库做您想做的事情。

shell
$('a.current-page').click(function() { return false; });

CSS 无法禁用链接。它可以抑制点击等指针事件，但点击并不是激活链接的唯一方式。您的选择是：

• 不要在标记中包含href或属性。onclick``<a>
• 使用document.querySelectoret al 找到您想要禁用的锚元素。删除它们的href或onclick属性，以便它们不再具有可以通过任何方法激活的链接行为。

引导程序禁用链接

shell
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap 禁用按钮，但看起来像链接

shell
<button type="button" class="btn btn-link">Link</button>