是否有一种方法禁用链接使用CSS?
我有一个名为current-page的类,并希望禁用该类的链接,以便在单击它们时不发生任何操作。
是否有一种方法禁用链接使用CSS?
我有一个名为current-page的类,并希望禁用该类的链接,以便在单击它们时不发生任何操作。
当前回答
简单地使用你的标签没有链接,不包括任何链接属性。
其他回答
Pointer-events:none将禁用该链接:
.disabled {
pointer-events: none;
}
<a href="#" class="disabled">link</a>
我结合了多种方法来提供一些更高级的禁用功能。这里有一个要点,代码如下。
这提供了多个级别的防御,因此标记为禁用的锚实际上是禁用的。
使用这种方法,你可以得到一个锚,你不能:
点击 按TAB键返回 标签将焦点移动到下一个可聚焦的元素 它知道锚是否随后被启用
Include this CSS content, as it is the first line of defense. This assumes the selector you use is 'a.disabled'. a.disabled { pointer-events: none; cursor: default; } Next, instantiate this class such as (with optional selector): $ -> new AnchorDisabler() Here is the CoffeeScript class: 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 JavaScript 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
在HTML上应用下面的类。
.avoid-clicks {
pointer-events: none;
}
<a href="#!">1)链接非定向url</a><br><br> <a href="#!" disabled >2) Link With With disable url</a><br><br>
简单地使用你的标签没有链接,不包括任何链接属性。