尽管该链接被禁用,但它仍然是可点击的。

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

如果它是禁用的,我可以使它不可点击吗?我应该使用JavaScript吗?


当前回答

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

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>

其他回答

我能够使用ng-href三元操作实现所需的结果

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

在哪里

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

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

我看到这里已经贴出了大量的答案,但我不认为有任何明确的答案可以将前面提到的方法结合到我发现的有效方法中。这是为了使链接既显示为禁用,也不会将用户重定向到另一个页面。

这个答案假设你正在使用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;
}

您可以在<a>标记上模拟禁用属性。

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

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

<a>标签没有禁用属性,这只是为<input>s(和<select>s和<textarea>s)。

要“禁用”一个链接,你可以删除它的href属性,或者添加一个返回false的点击处理程序。

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

所以我创建了一个小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>