CSS 如何禁用超链接

href属性指定超链接指向的页面的URL，而此属性指定了外部资源（通常是样式表文件）的位置（URL）。要禁用超链接，我们需要使用各种属性与其结合使用。

语法

在HTML中，我们使用以下语法来使用href属性。

<a href="URL">Text</a>

在这里，我们也可以使用<link>标签而不是<a>标签。

多种方法

我们提供了不同的方法来解决这个问题。

使用pointer-events属性。
使用Bootstarp禁用链接属性。

让我们一一看看程序及其输出。

方法1：使用pointer-events属性

在这种方法中，href类内的链接被用来停用a>标签内的链接，并且使用pointer-events CSS属性来控制当点击时页面上的元素是否需要响应。

特定可视元素成为指针事件的目标的能力由pointer-events CSS属性控制，该属性指定它们是否可以。

我们除了使用pointer-events属性外，还使用了颜色和文本装饰属性。

值得注意的是，pointer-events是对非SVG元素使用CSS的实验性用法。由于存在许多未解决的问题，该功能最初是为CSS 3 UI草案规范而设计的，但现在已经移至CSS 4。

语法

以下是pointer-events CSS属性的通用语法，在参数中根据需要采用不同的属性。

Pointer-events: none;

示例

下面的程序中，我们使用内联CSS，在style标签中创建类，并将pointer-event属性设置为none，这样，在<a>标签中使用时，可以使href链接失效，通过添加相同的类将文本添加到<a>标签中，在HTML编程语言中使其失效。

<!DOCTYPE html>
<html 
   <head>
      <meta charset="utf-8">
      <title>Disable a href Link using CSS</title>
   </head>
   <style>
      .disable-link{
         pointer-events: none;        
         text-decoration: none;
         color: black;
      }
   </style>
   <body>
      <a class="disable-link" href="tutorialspoint.html">Link</a>
   </body>
</html>

方法2：使用Bootstrap的禁用链接属性

在这种方法中，href链接属性与预定义的Bootstrap类禁用属性配合使用，使提供的链接变为禁用状态。

为了尝试禁用<a>的链接功能，并在外观上使其看起来禁用，.disabled类使用pointer-events: none。

示例

在这个程序中，我们使用了Bootstrap的内置类.disabled与<a>配合使用，其中我们使用了href属性与链接，以使相同的链接在HTML编程语言中对任何用户不可用。

<!DOCTYPE html>
<html>
   <head>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <ul class="nav nav-tabs nav-justified">
         <li class="disabled"> <a class="disabled" href="tutorialspoint.html">Link</a></li>
      </ul>
   </body>
</html>

支持的浏览器 - 支持pointer-events属性的浏览器如下所示：