如何仅使用CSS禁用链接

CSS不能这样做。CSS仅用于演示。您的选项是：

• 不要在<a>标签中包含href属性。
• 使用JavaScript，找到具有class的锚点元素，并相应地删除它们的href或onclick属性。jQuery会帮助你（NickF展示了如何做类似但更好的事情）。

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

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

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

CSS只能用于更改某些内容的样式。使用纯CSS所能做的最好的事情就是完全隐藏链接。

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

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

使用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，您必须替换其单击事件或href，如其他人所述。

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

从这个解决方案：

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

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

For browser support, please see https://caniuse.com/#feat=pointer-events. If you need to support Internet Explorer, there is a workaround; see this answer.

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS 3 UI draft specification but, due to many open issues, has been postponed to CSS 4.

如果您只想在表单上坚持使用超文本标记语言/CSS，另一种选择是使用按钮。对其进行样式设置并设置disabled属性。

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

演示
试试这个

$('html').on('click', 'a.Link', function(event){event.preventDefault();});

您还可以调整另一个元素的大小，使其覆盖链接（使用正确的z-index）：这将“吃掉”点击。

（我们偶然发现了这一点，因为我们遇到了一个问题，由于“响应式”设计导致H2在浏览器窗口为移动大小时覆盖它们。

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>

引导禁用按钮，但它看起来像链接

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

试试这个：

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

我结合了多种方法来提供一些更高级的disabled功能。这里有个要点，代码如下。

这提供了多层次的防御，因此标记为禁用的锚实际上表现为禁用。

使用这种方法，您将获得一个您无法：

• 点击
• Tab to并点击回车键
• 选项卡将焦点移动到下一个可获得焦点的元素
• 它知道锚是否随后被启用

1. 包含此CSS内容，因为它是第一道防线。这假设您使用的选择器是“a.disabled”。

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

2. 接下来，实例化这个类，例如（使用可选的选择器）：

    $ ->new AnchorDisabler()

   下面是CoffeeScript类：

    class AnchorDisablerconstructor: (selector = 'a.disabled') ->$(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)
   isStillDisabled: (ev) =>### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###target = $(ev.target)return true if target.hasClass('disabled')return true if target.attr('disabled') is 'disabled'return false
   onFocus: (ev) =>### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###return unless @isStillDisabled(ev)
   focusables = $(':focusable')return unless focusables
   current = focusables.index(ev.target)next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))
   next.focus() if next
   
   onClick: (ev) =># disabled could be dynamically removedreturn unless @isStillDisabled(ev)
   ev.preventDefault()return false
   onKeyup: (ev) =>
   # 13 is the JavaScript key code for Enter. We are only interested in disabling that, so get out fastcode = ev.keyCode or ev.whichreturn unless code is 13
   # disabled could be dynamically removedreturn unless @isStillDisabled(ev)
   ev.preventDefault()return false

我搜索了互联网，发现没有比这个更好的了。基本上，要禁用按钮单击功能，只需使用jQuery添加CSS样式，如下所示：

$("#myLink").css({ 'pointer-events': 'none' });

然后再次启用它，这样做

$("#myLink").css({ 'pointer-events': '' });

它在Firefox和Internet Explorer 11上进行了检查，并且有效。

您可以使用此CSS内容：

a.button,button {display: inline-block;padding: 6px 15px;margin: 5px;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid rgba(0, 0, 0, 0);border-radius: 4px;-moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;-webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;box-shadow: inset 0 3px 20px 0 #cdcdcd;}
a[disabled].button,button[disabled] {cursor: not-allowed;opacity: 0.4;pointer-events: none;-webkit-touch-callout: none;}
a.button:active:not([disabled]),button:active:not([disabled]) {background-color: transparent !important;color: #2a2a2a !important;outline: 0;-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);}

<button disabled="disabled">disabled!</button><button>click me!</button><a href="http://royansoft.com" disabled="disabled" class="button">test</a><a href="http://royansoft.com" class="button">test2</a>

事件类型属性允许控制超文本标记语言元素的方式响应鼠标/触摸事件-包括CSS悬停/活动状态，单击/点击JavaScript中的事件，以及光标是否可见。

这是没有禁用链接的唯一方式，但它是一种很好的CSS方式，适用于Internet Explorer 10（及更高版本）和所有新浏览器：

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

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

如果您希望它仅是CSS，则禁用逻辑应由CSS定义。

要移动CSS定义中的逻辑，您必须使用属性选择器。以下是一些示例：

禁用具有精确href的链接：=

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

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

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

禁用包含一段路径的链接：*=

在这里，任何包含/keyword/in路径的链接都将被禁用：

<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可以针对任何超文本标记语言属性。可以是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;}

浏览器支持

从Internet Explorer 7开始支持属性选择器。从Internet Explorer 9开始支持:not()选择器。

pointer-events:none将禁用链接：

.disabled {pointer-events: none;}

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

在CSS中可以这样做：

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

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

See at:

Please note that the text-decoration: none; and color: black; is not needed, but it makes the link look more like plain text.

我使用：

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

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

我不得不补充：

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

另一个技巧是在它上面放置一个不可见的元素。这也将禁用任何悬停效果

.myButton{position: absolute;display: none;}
.myButton::after{position: absolute;content: "";height: 100%;width: 100%;top: 0;left: 0;}

将下面的类应用于超文本标记语言。

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

你也可以试试这个

<style>.btn-disable {pointer-events: none !important;color: currentColor;cursor: not-allowed;opacity: 0.6;text-decoration: none;}</style>

<html><head><title>NG</title></head><style>.btn-disable {pointer-events: none !important;color: currentColor;cursor: not-allowed;opacity: 0.6;text-decoration: none;}</style><body><div class="btn-disable"><input type="button" value="Show"></div></body></html>

只需使用不带链接的选项卡，不要包含任何链接属性。