如何在 CSS 中禁用 href 链接?

cssweb developmentfront end technology更新于 2024/8/3 12:28:17

href 属性指定链接指向页面的 URL，而此属性指定外部资源(通常是样式表文件)的位置 (URL)。要禁用 href 链接，我们需要使用各种属性。

语法

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

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

在这种情况下，我们也可以使用 <link> 标签代替 <a>标签。

多种方法

我们提供了不同方法的解决方案。

通过使用指针事件属性。

通过使用 Bootstarp 禁用链接属性。

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

方法 1:使用指针事件属性

在此方法中，类中的 href 用于停用 a> 中的链接。标签，而 pointer-events CSS 属性用于控制页面上的元素在被点击时是否必须响应。

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

除了 pointer-events 属性之外，我们还使用了 colour 和 text-decoration 属性。

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

语法

以下是 pointer-events CSS 属性的通用语法，其中参数采用相应的属性。

Pointer-events: none;

示例

以下程序我们使用内部 CSS，在 style 标签内创建类，并将 pointer-event 属性设置为 none，使 href 链接在 <a> 标签内使用时被禁用。通过向其添加相同的类，使在 <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>

方法二:使用 Bootstrap 的 disabled 链接属性

在此方法中，href 链接属性与 bootstrap disabled 类中预定义的属性结合使用，使提供的链接处于禁用状态。

为了尝试停用 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 属性支持的浏览器列表如下 −