Html 如何仅使用 CSS 禁用链接？

How to disable a link using only CSS?

提问by RSK

Is there any way to disable a link using CSS?

有什么办法可以禁用使用 CSS 的链接吗？

I have a class called current-pageand want links with this class to be disabled so that no action occurs when they are clicked.

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

回答by RSK

The answer is already in the comments of the question. For more visibility, I am copying this solutionhere:

答案已经在问题的评论中。为了获得更多可见性，我在此处复制此解决方案：

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

<a href="link.html" class="not-active">Link</a>

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

有关浏览器支持，请参阅https://caniuse.com/#feat=pointer-events。如果您需要支持 IE，有一个解决方法；看到这个答案。

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

警告：pointer-events在 CSS 中对非 SVG 元素的使用是实验性的。该功能曾经是 CSS3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS4。

回答by Amir Keshavarz

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

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

回答by nickf

CSS can only be used to change the style of something. The best you could probably do with pure CSS is to hide the link altogether.

CSS 只能用于改变某些东西的样式。使用纯 CSS 可能做的最好的事情就是完全隐藏链接。

What you really need is some javascript. Here's how you'd do what you want using the jQuery library.

你真正需要的是一些javascript。以下是您如何使用 jQuery 库做您想做的事。

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

回答by Kevin Conner

CSS can't do that. CSS is for presentation only. Your options are:

CSS 做不到这一点。CSS 仅用于演示。您的选择是：

• Don't include the hrefattribute in your <a>tags.
• Use JavaScript, to find the anchor elements with that class, and remove their hrefor onclickattributes accordingly. jQuery would help you with that (NickF showed how to do something similar but better).

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

回答by Jigar Bhatt

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 Disabled Button but it looks like link

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

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

回答by Xinus

You can set hrefattribute to javascript:void(0)

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

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

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

回答by Pablo Molina

I used:

我用了：

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

And was not enough; in some browsers it still displayed the link, blinking.

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

I had to add:

我不得不补充：

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

回答by fyjham

One way you could do this with CSS, would be to set a CSS on a wrapping divthat you set to disappear and something else takes it's place.

你可以用 CSS 做到这一点的一种方法是在div你设置为消失的包装上设置一个 CSS，其他东西取而代之。

E.g.:

例如：

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

With a CSS like

使用 CSS 之类的

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

To actually turn off the ayou'll have to replace it's click event or href, as described by others.

要实际关闭 ，a您必须替换它的点击事件或href，如其他人所述。

PS: Just to clarify I'd consider this a fairly untidy solution, and for SEO it's not the best either, but I believe it's the best with purely CSS.

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

回答by Sebastian Patten

If you want to stick to just HTML/CSS on a form, another option is to use a button. Style it and set the disabledattribute.

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

E.g. http://jsfiddle.net/cFTxH/1/

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

回答by Creaforge

If you want it to be CSS only, the disabling logic should be defined by CSS.

如果你只希望它是 CSS，禁用逻辑应该由 CSS 定义。

To move the logic in the CSS definitions, you'll have to use attribute selectors. Here are some examples :

要移动 CSS 定义中的逻辑，您必须使用属性选择器。这里有些例子 ：

Disable link that has an exact href: =

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

You can choose to disable links that contain a specific href value like so :

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

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

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

Disable a link that contains a piece of path: *=

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

Here, any link containing /keyword/in path will be disabled

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

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Disable a link that begins with: ^=

禁用以以下开头的链接： ^=

the [attribute^=value]operator target an attribute that starts with a specific value. Allows you to discard websites & root paths.

的[attribute^=value]操作者目标与一个特定的值开始的属性。允许您丢弃网站和根路径。

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

You can even use it to disable non-https links. For example :

您甚至可以使用它来禁用非 https 链接。例如 ：

a:not([href^="https://"]){
  pointer-events: none;
}

Disable a link that ends with: $=

禁用以以下内容结尾的链接： $=

The [attribute$=value]operator target an attribute that ends with a specific value. It can be useful to discard file extensions.

在[attribute$=value]操作者的目标的属性，与一个特定的值结束。丢弃文件扩展名可能很有用。

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

Or any other attribute

或任何其他属性

Css can target any HTML attribute. Could be rel, target, data-customand so on...

CSS 可以定位任何 HTML 属性。可能是rel，target，data-custom等...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Combining attribute selectors

组合属性选择器

You can chain multiple rules. Let's say that you want to disable every external link, but not those pointing to your website :

您可以链接多个规则。假设您想禁用每个外部链接，但不是那些指向您网站的链接：

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Or disable links to pdf files of a specific website :

或禁用指向特定网站的 pdf 文件的链接：

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Browser support

浏览器支持

Attributes selectors are supported since IE7. :not()selector since IE9.

从 IE7 开始支持属性选择器。:not()自 IE9 以来的选择器。