如何仅使用 CSS 禁用链接?

有什么方法可以使用 CSS 禁用链接吗?

我有一个称为current-page的类,希望禁用与该类的链接,以便在单击它们时不执行任何操作。

答案

答案已经在问题的注释中。为了获得更多可见性,我在这里复制此解决方案

.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 中将pointer-events用于非 SVG 元素是实验性的。该功能曾经是 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; });

CSS 无法做到这一点。 CSS 仅用于演示。您的选择是:

  • 不要在<a>标记中包含href属性。
  • 使用 JavaScript 查找具有class的锚元素,并相应地删除其hrefonclick属性。 jQuery 会帮助您解决这一问题(NickF 展示了如何做类似但更好的事情)。

引导程序禁用链接

<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 Disabled 按钮,但看起来像链接

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

您可以将href属性设置为javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>

没有 CSS 的唯一方法是在包装 div 上设置 CSS,这会使您成为一个消失的人,而其他人会代替它。

例如:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

用 CSS 之类的

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

要真正关闭 A,您必须替换其 click 事件或 href,如其他人所述。

PS:只是为了澄清一下,我认为这是一个相当不整洁的解决方案,对于 SEO 来说也不是最好的,但是我相信纯 CSS 最好。

如果您只想在表单上保留 HTML / CSS,则另一个选择是使用按钮。设置样式并设置disabled属性。

例如http://jsfiddle.net/cFTxH/1/

如果只希望它是 CSS,则禁用逻辑应由 CSS 定义。

要在 CSS 定义中移动逻辑,您必须使用属性选择器。这里有些例子 :

禁用具有确切 href 的链接: =

您可以选择禁用包含特定 href 值的链接,如下所示:

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

禁用包含一条路径的链接: *=

在此,路径中包含/keyword/任何链接都将被禁用

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

禁用以以下开头的链接: ^=

[attribute^=value]运算符的目标是一个以特定值开头的属性。允许您丢弃网站和根路径。

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

您甚至可以使用它来禁用非 https 链接。例如 :

a:not([href^="https://"]){
  pointer-events: none;
}

禁用以以下结尾的链接: $=

[attribute$=value]运算符的目标是以特定值结尾的属性。丢弃文件扩展名可能很有用。

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

或其他任何属性

CSS 可以定位任何 HTML 属性。可能是reltargetdata-custom等...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

组合属性选择器

您可以链接多个规则。假设您要禁用每个外部链接,但不禁用那些指向您的网站的链接:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

或禁用指向特定网站 pdf 文件的链接:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

浏览器支持

从 IE7 开始,支持属性选择器。 :not()选择器,从 IE9 开始。

我用了:

.current-page a:hover {
pointer-events: none !important;
}

而且还不够;在某些浏览器中,它仍然显示链接,闪烁。

我必须添加:

.current-page a {
cursor: text !important;
}