禁用具有完全href：`=`

Question

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

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

Answer 1

答案已在问题的评论中。为了获得更多可见性，我在这里复制this solution：

.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，有一个解决方法;见this answer。

警告：在CSS中使用pointer-events非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仅用于演示。您的选择是：

请勿在{{1}}标记中包含href属性。
使用JavaScript，查找包含<a>的锚元素，并相应地删除其class或href属性。 jQuery会帮助你（NickF展示了如何做类似但更好的事情）。

Answer 5

Bootstrap Disabled Link

<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，让你消失，别的东西就可以了。

EG：

<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：只是为了澄清我认为这是一个相当不整洁的解决方案，对于搜索引擎优化来说它也不是最好的，但我相信它是纯粹的CSS最好的。

Answer 8

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

E.g。 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]运算符定位以特定值开头的属性。允许您丢弃网站＆amp;根路径。

<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以来支持属性选择器。自IE9以来:not()选择器。

Answer 10

试试这个：

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

Answer 11

指针事件属性允许控制HTML元素的方式响应鼠标/触摸事件 - 包括CSS悬停/活动状态，点击/点击Javascript中的事件，以及光标是否为可见。

不 禁用链接的唯一方法，但是在IE10 +和所有新浏览器中使用的CSS方式很好：

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

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

Answer 12

我在互联网上搜索，发现并不比this好。基本上禁用按钮单击功能，只需使用jQuery添加CSS样式，如下所示：

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

然后再次启用它

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

在Firefox和IE 11上查看，它有效。

Answer 13

感谢所有发布解决方案的人，我结合了多种方法来提供更高级的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

Answer 14

你可以使用这个css：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 15

<强> Demo here
试试这个

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

Answer 16

我用过：

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

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

我必须添加：

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

Answer 17

在html的类下方应用。

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

Answer 18

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

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

Answer 19

pointer-events:none将停用该链接：

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>

Answer 20

可以在CSS

中完成

＆＃13;

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

＆＃13;

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

＆＃13;

见：

请注意，不需要text-decoration: none;和color: black;，但它会使链接看起来更像纯文本。

Answer 21

<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>

Answer 22

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

.myButton{
    position: absolute;
    display: none;
}

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

Answer 23

<块引用>

你也可以试试这个

<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>

如何仅使用CSS禁用链接？

23 个答案:

Bootstrap Disabled Link

Bootstrap已禁用按钮，但它看起来像链接

禁用具有完全href：`=`

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

禁用以`^=`

禁用以`$=`

或任何其他属性

组合属性选择器

浏览器支持

如何仅使用CSS禁用链接？

23 个答案:

Bootstrap Disabled Link

Bootstrap已禁用按钮，但它看起来像链接

禁用具有完全href：=

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

禁用以^=

禁用以$=

或任何其他属性

组合属性选择器

浏览器支持

禁用具有完全href：`=`

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

禁用以`^=`

禁用以`$=`