如何使锚点链接不可点击或禁用？

Question

我有一个锚点链接,我想在用户点击它时禁用它.或者,从文本周围删除锚标记,但绝对保留文本.

<a href='' id='ThisLink'>some text</a>

通过添加.attr("disabled", "disabled");
我成功添加了禁用属性,我可以通过按钮轻松完成此操作,但链接仍然可以点击.
我真的不在乎文本是否加下划线.

任何线索？

当你点击错误的音乐家时,它应该只是添加"错误"然后变得无法点击.
当您单击并且您是正确的时,它应该添加"Awesome"然后禁用所有<a>标签.

Answer 1

最干净的方法是在要禁用单击时添加一个带指针事件的类:none.它的功能类似于普通标签.

.disableClick{
    pointer-events: none;
}

Answer 2

<a href='javascript:void(0);'>some text</a>

Answer 3

选择答案不好.

使用指针事件 CSS样式.(正如Jason MacDonald建议的那样)

请参阅MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.大多数浏览器都支持它.

如果你有如下全局CSS规则,那么简单地将"disabled"属性添加到锚点就可以完成这项工作:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Answer 4

我刚刚意识到你的要求(我希望).这是一个丑陋的解决方案

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

Answer 5

$('a').removeAttr('href')

要么

$('a').click(function(){ return false})

这取决于情况

Answer 6

添加一个css类:

.disable_a_href{
    pointer-events: none;
}

添加这个jquery:

$("#ThisLink").addClass("disable_a_href"); 

Answer 7

Bootstrap为我们提供了.disabled课程.请使用它.

但是.disabled只有当'a'标签已经具有类'btn'时,类才有效.它不适用于任何旧的'a'标签.该btn班可能无法在某些情况下是合适的,因为它有风格的内涵.在幕后,将.disabled类设置pointer-events到none,这样就可以使CSS做同样的事情,Saroj阿亚尔和Vitrilo已经sugested.(谢谢你,Les Nightingill的建议).

Answer 8

只需href从锚标记中删除该属性即可.

Answer 9

最好的方法是阻止默认操作.在锚标记的情况下,默认行为是重定向到href指定的地址.

因此,遵循javascript在这种情况下效果最佳:

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

Answer 10

编写一行 jQuery 代码

$('.hyperlink').css('pointer-events','none');

如果你想写在css文件中

.hyperlink{
    pointer-events: none;
}