感谢所有发布解决方案的人，我结合了多种方法来提供更高级的 disabled 功能 . Here is a gist，代码如下 .
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
20 回答
CSS只能用于改变样式一些东西 . 你可以用纯CSS做的最好的事情就是隐藏链接 .
你真正需要的是一些javascript . 以下是使用jQuery库执行所需操作的方法 .
感谢所有发布解决方案的人，我结合了多种方法来提供更高级的
disabled功能 . Here is a gist，代码如下 .这是coffescript类：
这是 not 唯一的方式 disable a Link ，但是在IE10和所有新浏览器中运行的CSS方式很好：
Demo here
试试这个
答案已经在问题的评论中 . 为了获得更多可见性，我在这里复制this solution：
有关浏览器支持，请参阅https://caniuse.com/#feat=pointer-events . 如果你需要支持IE，有一个解决方法;见this answer .
警告：在CSS中使用pointer-events非SVG元素是实验性的 . 该功能曾经是CSS3 UI草案规范的一部分，但由于许多未解决的问题，已被推迟到CSS4 .
只有这样你才能在没有CSS的情况下做到这一点，就是在包装div上设置一个CSS，让你消失，其他东西就是它的位置 .
例如：
用CSS喜欢
要实际关闭A，您必须更换它的click事件或href，如其他人所述 .
PS：只是为了澄清我认为这是一个相当凌乱的解决方案，对于搜索引擎优化它也不是最好的，但我相信它是纯粹的CSS最好的 .
如果您想坚持表单上的HTML / CSS，另一个选择是使用按钮 . 设置样式并设置
disabled属性 .例如 . http://jsfiddle.net/cFTxH/1/
你可以用这个css：
您还可以调整另一个元素的大小，使其覆盖链接（使用正确的z-index）：这将“吃掉”点击次数 .
（我们偶然发现了这一点，因为我们遇到了突然失效的链接问题，因为“响应式”设计导致H2在浏览器窗口移动大小时覆盖它们 . ）
pointer-events:none将禁用链接：试试这个：
您可以将
href属性设置为javascript:void(0)如果您希望它只是CSS，则禁用逻辑应由CSS定义 .
要移动CSS定义中的逻辑，您必须使用属性选择器 . 这里有些例子 ：
禁用具有精确href：=的链接
您可以选择禁用包含特定href值的链接，如下所示：
禁用包含路径的链接：* =
此处，将禁用包含路径中的
/keyword/的任何链接禁用以：^ =开头的链接
[attribute^=value]运算符以一个以特定值开头的属性为目标 . 允许您放弃网站和根路径 .您甚至可以使用它来禁用非https链接 . 例如 ：
禁用以以下结尾的链接：$ =
[attribute$=value]运算符定位以特定值结尾的属性 . 丢弃文件扩展名可能很有用 .或任何其他属性
Css可以定位任何HTML属性 . 可能
rel，target，data-custom等等......组合属性选择器
您可以链接多个规则 . 假设你想要禁用每个外部链接，而不是那些指向你网站的链接：
或禁用指向特定网站的pdf文件的链接：
浏览器支持
IE7以来支持属性选择器 . 自IE9起
:not()选择器 .我用了：
还不够;在某些浏览器中，它仍显示链接，闪烁 .
我不得不补充：
CSS无法做到这一点 . CSS仅用于演示 . 你的选择是：
不要在
<a>标记中包含href属性 .使用JavaScript，查找具有该
class的锚元素，并相应地删除它们的href或onclick属性 . jQuery会帮助你（NickF展示了如何做类似但更好的事情） .Bootstrap Disabled Link
Bootstrap禁用按钮，但它看起来像链接
我通过互联网搜索，发现并不比this好 . 基本上禁用按钮单击功能，只需使用jQuery添加CSS样式，如下所示：
然后再次启用它
检查Firefox和IE 11，它的工作原理 .
可以在CSS中完成它
见：
请注意，不需要
text-decoration: none;和color: black;，但它使链接看起来更像纯文本 .