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

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

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


当前回答

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

这个答案假设你正在使用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 href="javascript:void(0)" style="cursor: default;">123n</a>

如果你需要用Javascript禁用laravel上的链接,这是我的解决方案:

链接(blade.php):

<a href='/link/to/path' class='btn btn-primary mt-3' onclick='disableLink(this)'>Confirmar</a>

. css文件

.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
}

a[aria-disabled="true"] {
    color: currentColor;
    display: inline-block; /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
}

.js文件

function disableLink(link) {
    // 1. Add isDisabled class to parent element
    link.parentElement.classList.add('isDisabled');
    // 2. Store href so we can add it later
    link.setAttribute('data-href', link.href);
    // 3. Set aria-disabled to 'true'
    link.setAttribute('aria-disabled', 'true');
}

function enableLink(link) {
    // 1. Remove 'isDisabled' class from parent span
    link.parentElement.classList.remove('isDisabled');
    // 2. Set href
    link.href = link.getAttribute('data-href');
    // 3. Remove 'aria-disabled', better than setting to false
    link.removeAttribute('aria-disabled');
}

参考:https://css-tricks.com/how-to-disable-links/

如果你正在使用WordPress,我创建了一个插件,可以做到这一点,而且不需要知道如何编码任何东西。你所需要做的就是添加你想要禁用的链接的选择器,然后从出现的下拉菜单中选择“在新选项卡中禁用使用此选择器的所有链接”,然后单击更新。

点击这里查看演示这一点的动图

你可以从WordPress.org插件库中获得免费版本来尝试一下。

你可以使用:

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

如果你只是想暂时禁用链接,但留下href在那里启用以后(这是我想做的),我发现所有的浏览器使用第一个href。因此,我能够这样做:

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