如何仅使用CSS禁用链接？

Question

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

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

Answer 1

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

.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,有一个解决方法; 看到这个答案.

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

• 不要href在<a>标记中包含该属性.
• 使用JavaScript,查找具有该元素的锚元素class,并相应地删除它们href或onclick属性.jQuery会帮助你(NickF展示了如何做类似但更好的事情).

Answer 5

Bootstrap禁用链接

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

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

Answer 6

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

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

Answer 7

只有这样你才能在没有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:只是为了澄清我认为这是一个相当凌乱的解决方案,对于搜索引擎优化它也不是最好的,但我相信它是纯粹的CSS最好的.

Answer 8

如果您想坚持表单上的HTML/CSS,另一个选择是使用按钮.设置样式并设置disabled属性.

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

Answer 9

如果您希望它只是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属性.可能是rel,target,data-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以来的选择器.

Answer 10

试试这个:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

Answer 11

该指针的事件属性,可控制HTML元素如何响应鼠标/触摸事件-包括CSS悬停/活动状态,单击/点击事件在Javascript中,光标是否是可见的.

这不是禁用链接的唯一方法,而是一种适用于IE10 +和所有新浏览器的好方法:

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

Answer 12

我用了：

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

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

我必须添加：

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

Answer 13

在 HTML 上应用以下类。

.avoid-clicks {
  pointer-events: none;
}