如何仅使用 CSS 禁用链接？

有没有办法使用 CSS 禁用链接？

我有一个名为current-page的类，并希望禁用此类的链接，以便在单击它们时不会发生任何操作。

html css

答案已经在问题的评论中。为了获得更多可见性，我在此处复制此解决方案：

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

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

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

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

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

CSS 只能用于改变某些东西的风格。你可以用纯 CSS 做的最好的事情是完全隐藏链接。

你真正需要的是一些 javascript。以下是使用 jQuery 库执行所需操作的方法。

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