如何使锚链接无法点击或禁用?

问题描述 投票:79回答:18

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

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

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

任何线索?

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

jquery
18个回答
10
投票

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

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;
});

4
投票

写一行jQuery代码

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

如果你想写css文件

.hyperlink{
    pointer-events: none;
}

3
投票

您可以使用onclick事件来禁用单击操作:

<a href='' id='ThisLink' onclick='return false'>some text</a>

或者您可以使用除<a>标签之外的其他东西。


3
投票

在样式表中创建以下类:

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

将此类添加到您动态链接,如下所示。

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

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

3
投票

Jason MacDonald评论为我工作,在Chrome,Mozilla和IE中测试过。

添加灰色以显示禁用效果。

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery只选择了锚列表中的第一个元素,添加了元字符(*)来选择和禁用id为#ThisLink的所有元素。

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

1
投票

试试这个:

$('a').contents().unwrap();

1
投票

只需在SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

1
投票

这是我用来禁用的方法。希望它有帮助。

$("#ThisLink").attr("href","javascript:;");

-1
投票
$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

这将是另一种方法,一次单击后将添加将禁用链接的return false处理程序。


-4
投票

最简单的方法

在你的HTML中:

<a id="foo" disabled="true">xxxxx<a>

在你的js中:

$('#foo').attr("disabled", false);

如果您使用它作为属性完美地工作


188
投票

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

.disableClick{
    pointer-events: none;
}

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

27
投票

使用指针事件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;
}

10
投票
$('a').removeAttr('href')

要么

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

这取决于情况


9
投票

添加css类:

.disable_a_href{
    pointer-events: none;
}

添加此jquery

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

9
投票

Bootstrap为我们提供.disabled类。请使用它。

.disabled类仅在'a'标签已经具有类'btn'时起作用。它不适用于任何旧的'a'标签。 btn类在某些情况下可能不合适,因为它具有样式内涵。在封面下,.disabled类将pointer-events设置为none,因此您可以使CSS与Saroj Aryal和Vitrilo进行相同的操作。 (谢谢你,Les Nightingill的建议)。


5
投票

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


5
投票

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

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

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});
© www.soinside.com 2019 - 2024. All rights reserved.