如何禁用仅使用CSS的链接？
有没有什么办法来禁用使用CSS的链接？
我有一个名为current-page类，并希望与这个类的链接被禁用，使得单击时不会发生任何操作。
答案已经在这个问题的评论中了。 为了更多的知名度，我在这里复制这个解决scheme ：
<a href="link.html" class="not-active">Link</a> .not-active { pointer-events: none; cursor: default; }
例如： http : //jsfiddle.net/7EQJp
有关浏览器的支持，请参阅： http ： //caniuse.com/#search=pointer-events *，如果您需要支持IE有一种解决方法，请参阅此答案 。
警告：在非SVG元素的CSS中使用指针事件是实验性的。 该function曾经是CSS3 UI草案规范的一部分，但由于许多未解决的问题，已被推迟到CSS4。*
CSS只能用来改变东西的风格。 你可以用纯CSS来做最好的事情就是完全隐藏链接。
你真正需要的是一些JavaScript。 以下是你如何使用jQuery库来做你想做的事情。
$('a.current-page').click(function() { return false; });
.disabled { pointer-events: none; cursor: default; opacity: 0.6; }
<a href="#" class="disabled">link</a>
CSS不能这样做。 CSS仅用于演示。 您的select是：
- 不要在您的
<a>标签中包含href属性。 - 使用JavaScript来查找具有
class的锚元素，并相应地删除其href或onclick属性。 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>
引导禁用button，但它看起来像链接
<button type="button" class="btn btn-link">Link</button>
您可以将href属性设置为javascript:void(0)
<style> .disabled{ /*Disabled link style*/ color:black; } </style> <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; }
要实际closuresA，您必须replace它的单击事件或href，如其他人所述。
PS：只是为了澄清我会认为这是一个相当不整洁的解决scheme，对于SEO也不是最好的，但我相信这是纯粹的CSS最好的。
如果你想坚持HTML / CSS的forms，另一个select是使用一个button。 对其进行设置并设置disabled属性。
尝试这个：
<style> .btn-disable { display:inline-block; pointer-events: none; } </style>
我在互联网上search，发现没有比这更好。 基本上禁用button点击function，只需使用jQuery添加CSS样式，如下所示：
$("#myLink").css({ 'pointer-events': 'none' });
然后再次启用它做到这一点
$("#myLink").css({ 'pointer-events': '' });
检查了Firefox和IE 11，它的工作。
pointer-events属性允许控制HTML元素如何响应鼠标/触摸事件 – 包括CSShover/活动状态，Javascript中的点击/点击事件以及光标是否可见。
这不是阻止链接的唯一方式，而是一种在IE10 +和所有新浏览器中工作的良好CSS方式：
.current-page { pointer-events: none; color: grey; }
<a href="#" class="current-page">This link is disabled</a>
感谢大家发布的解决scheme，我结合了多种方法来提供一些更高级的disabledfunction。 这是一个要点 ，代码如下。
This provides for multiple levels of defense so that Anchors marked as disable actually behave as such. Using this approach, you get an anchor that you cannot: - click - tab to and hit return - tabbing to it will move focus to the next focusable element - it is aware if the anchor is subsequently enabled 1. Include this css, as it is the first line of defense. This assumes the selector you use is 'a.disabled' a.disabled { pointer-events: none; cursor: default; } 2. Next, instantiate this class such as (with optional selector): $ -> new AnchorDisabler()
这是coffescript类：
class AnchorDisabler constructor: (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 removed return unless @isStillDisabled(ev) ev.preventDefault() return false onKeyup: (ev) => # 13 is the js key code for Enter, we are only interested in disabling that so get out fast code = ev.keyCode or ev.which return unless code is 13 # disabled could be dynamically removed return unless @isStillDisabled(ev) ev.preventDefault() return false
如果你希望它只是CSS，禁用逻辑应该由CSS定义。
要移动CSS定义中的逻辑，您必须使用属性select器。 这里有些例子 ：
禁用具有精确href： =链接
您可以select禁用包含特定href值的链接，如下所示：
<a href="//website.com/exact/path">Exact path</a> [href="//website.com/exact/path"]{ pointer-events: none; }
禁用包含一段path的链接： *=
在这里，任何包含/keyword/path的链接都将被禁用
<a href="//website.com/keyword/in/path">Contains in path</a> [href*="/keyword/"]{ pointer-events: none; }
禁用以^=开头的链接
[attribute^=value]操作符以一个特定值开始的属性为目标。 允许您放弃网站和根path。
<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; }
组合属性select器
您可以链接多个规则。 假设您要禁用每个外部链接，但不是指向您网站的链接：
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以来，支持属性select器。 :not()自IE9以来:not()select器。
在这里演示
试试这个
$('html').on('click', 'a.Link', function(event){ event.preventDefault(); });
你可以使用这个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>
您还可以调整其他元素的大小，使其覆盖链接（使用正确的z-index）：这将“吃”点击。
（我们发现这是偶然的，因为我们有一个问题，由于“响应”devise导致H2在浏览器窗口的移动大小时覆盖它们，因此忽略不活动的链接。）
