禁用的href标签

尽管该链接已禁用，但仍然可以单击。

<a href="/" disabled="disabled">123n</a>

如果禁用它，我可以使其不可单击吗？我是否必须使用JavaScript？

没有超链接的禁用属性。如果您不希望链接某些内容，则需要<a>完全删除该标签或删除其href属性。

借助CSS，您将禁用超链接。试试下面

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

<a href="link.html" class="disabled">Link</a>

您可以使用：

<a href="/" onclick="return false;">123n</a>

您可以使用以下解决方案之一：

的HTML

<a>link</a>

的JavaScript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

的CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

试试这个：

<a href="javascript:void(0)" style="cursor: default;">123n</a>

该<a>标签不具有disabled的属性，这只是为<input>S（和<select>S和<textarea>S）。

要“禁用”链接，可以删除其href属性，或添加返回false的单击处理程序。

您需要删除<a>标签才能摆脱这种情况。

或尝试使用：-

  <a href="/" onclick="return false;">123n</a>

HTML：

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS：

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

提示1：使用CSS pointer-events: none;

提示2：使用JavaScript javascript:void(0) （这是最佳做法）

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

提示1：使用Jquery $('selector').attr("disabled","disabled");

仅限CSS：从中删除链接href。

.disable { 
    pointer-events: none; 
    cursor: default; 
}

让父母拥有pointer-events: none将禁用a-tag像这样的孩子（要求div覆盖a且宽度/高度不为0）：

<div class="disabled">
   <a href="/"></a>
</div>

哪里：

.disabled {
    pointer-events: none;
}

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

您可以使用此代码在运行时使用javascript禁用链接

$（'。page-link'）。css（“ pointer-events”，“ none”）;

如果要摆脱指针，可以使用cursor使用CSS进行操作。

您可以在<a>标签上模拟Disabled属性。

<a href="link.html" disabled="">Link</a>

a[disabled] {
   pointer-events: none;
   cursor: default;
}

就我而言

<a href="/" onClick={e => e.preventDefault()}>

我有一个：

<a href="#">This is a disabled tag.</a>

希望它能对您有所帮助;）

我们不能直接禁用它，但是我们可以执行以下操作

1. 加 type="button"。
2. 去除 href=""属性。
3. add disabled属性，因此它表明通过更改课程进程禁用了该属性，并且该属性变暗了。

以下是一个例子

<?php
if($status=="Approved"){ 
?>
  <a type="button" class="btn btn-primary btn-xs" disabled> EDIT
     </a>
  <?php    
}else{
?>
  <a href="index.php" class="btn btn-primary btn-xs"> EDIT
    </a>
  <?php    
}
?>

我能够使用ng-href三元运算获得所需的结果

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

哪里

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

正确使用按钮和链接。

•按钮激活 脚本功能网页上的（对话框，展开/折叠区域）。

•链接将您带到另一个位置，即另一个页面或同一页面上的另一个位置。

如果遵循这些规则，则在需要禁用链接时不会有任何情况。即使您使链接看起来在视觉上被禁用并且在单击时空白

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

您不会考虑可访问性，屏幕阅读器会将其视为链接，而视障人士会一直想知道为什么该链接不起作用。

如果您使用的是WordPress，我创建了一个插件，可以执行此操作以及执行更多操作而无需知道如何编写任何代码。您需要做的就是添加要禁用的链接的选择器，然后选择“在新选项卡中禁用使用此选择器的所有链接”。从出现的下拉菜单中，然后单击更新。

单击此处查看演示此操作的GIF

您可以从WordPress.org插件存储库中获得免费版本以进行试用。

以下是禁用a标签的各种方法：

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

由于锚标记没有禁用的属性。如果要停止jQuery函数中的锚标记行为，则可以在函数开头使用以下行：

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault（）

我看到这里已经发布了大量的答案，但是我认为还没有任何明确的方法可以将已经提到的方法与我发现的方法结合起来。这是为了使链接既显示为禁用状态，又不将用户重定向到另一个页面。

此答案假定您正在使用jquery和bootstrap，并href在禁用时使用另一个属性临时存储该属性。

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }

a.disabled {
  cursor: default;
}

href中的任何内容鼠标悬停标记中的所有内容都将显示在浏览器窗口的左下方。

我个人认为具有javascript：void（0）向用户显示很可怕。

取而代之的是，取消href，使用jQuery /其他方法处理魔术，并添加样式规则（如果您仍然需要它看起来像一个链接）：

a {
    cursor:pointer;
}

最佳答案永远是最简单的。无需任何编码。

如果（a）定位标记没有href属性，则它只是超链接的占位符。所有浏览器都支持！

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

您可以通过返回false来禁用锚标记。在我的情况下，Im为Jquery手风琴使用angular和ng-disabled，我需要禁用这些部分。

所以我创建了一个小js代码段来解决此问题。

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

如果您只是想暂时禁用该链接，但是将href留在那里以便以后启用（这是我想做的），我发现所有浏览器都使用第一个href。因此，我能够做到：

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

适合我的变体：

<script>
  function locker(){
    if ($("a").hasClass("locked")) {
         $("a").removeClass('locked').addClass('unlocked');
         $("a").attr("onClick","return false");
    } else {
         $("a").css("onclick","true");
         $("a").removeClass('unlocked').addClass('locked');
         $("a").attr("onClick","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>

<a href="/" disabled="true" onclick="return false">123</a>

只需添加：一般而言，此方法有效，但是如果用户已禁用浏览器中的javascript，则它将无效。

1）在集成bootstrap 3插件后，可以选择在锚标签上使用Bootstrap 3类禁用href标签。

<a href="/" class="btn btn-primary disabled">123n</a>

要么

2）了解如何在浏览器中使用html或js启用javascript。或创建一个弹出窗口，告诉用户在使用网站之前启用javascript