Question

我想在点击链接时禁用链接，这是我的代码：

<a href="?cmd=7" style="color:#00F; margin-left:15px; text-decoration:underline">Past 7 Days</a>
<a href="?cmd=14" style="color:#00F; margin-left:15px; text-decoration:underline">Past 14 Days</a>
<a href="?cmd=30" style="color:#00F; margin-left:15px; text-decoration:underline">Past 30 Days</a>
<a href="?cmd=custom" style="color:#00F; margin-left:15px; text-decoration:underline">Set A Custom Date Range</a>

我希望当我点击过去7天链接此链接已禁用或启用其他链接时，如果我点击过去14天链接，过去7天链接已启用且过去14天链接已禁用。我会做什么此？

Answer 1

$('a').on('click',function(){
   $('a').removeAttr('disabled');
   $(this).attr('disabled',true);
})

或

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

$('a').on('click',function(){
    $('a').removeClass('disable');
    $(this).addClass('disable');
})

Answer 2

CSS：

a:visited
{
 pointer-events: none;
 cursor: default;
}

Answer 3

使用此代码禁用jquery

$("a").on('click',function(){
$(this).attr('disabled',true);
})

Answer 4

试试这个：

$('a').on("click", function (e) {
    e.preventDefault();
});

Answer 5

由于我的声誉不允许我发表评论，我将在此发布作为答案。这是为了改进Karthick Kumar Ganesh的答案。

根据您使用的jq版本，您应该使用.prop()代替.attr()来设置属性/属性。

如果你不只是解决锚点或添加get参数，我会在你的链接上使用一个类，这应该被禁用，以便在点击后不会禁用所有链接。

$("a.disabable").on('click',function(){
  $(this).prop('disabled',true);
})

最后，添加target="_blank"或类似链接的内容非常有意义，以便您的链接在新标签页中打开。否则，单击链接后禁用链接是没有意义的。

示例链接看起来像这样

<a href="wher/you/want/to/go" class="disabable" target="blank" style="[...]">Foo</a>

Answer 6

到目前为止，这是唯一的解决方案，可以像OP中描述的那样跨页面加载（我假设锚点上的点击会更改文档位置，从而重新加载页面）。

HTML（添加class属性）：

<a class="cmd-7" href="?cmd=7" style="color:#00F; margin-left:15px; text-decoration:underline">Past 7 Days</a>
<a class="cmd-14" href="?cmd=14" style="color:#00F; margin-left:15px; text-decoration:underline">Past 14 Days</a>
<a class="cmd-30" href="?cmd=30" style="color:#00F; margin-left:15px; text-decoration:underline">Past 30 Days</a>
<a class="cmd-custom" href="?cmd=custom" style="color:#00F; margin-left:15px; text-decoration:underline">Set A Custom Date Range</a>

JavaScript（使用this answer中的代码）：

$(function() {
  // Get the cmd query parameter
  var cmd = getParameterByName('cmd');
  if(cmd) {
    // Disable the link
    $('a.cmd-' + cmd).click(function(event) {
      event.preventDefault();
    })
    // Add a class to allow styling
    .addClass('disabled');
  }
});

Answer 7

.disabled {
text-decoration:none;
color:black;
 }


<a class="links" href="##"> Link1 </a></br>
<a class="links" href="##"> Link2 </a></br>
<a class="links" href="##"> link3 </a></br>


$(function(){
   $(".links").click(function(){
    if($(this).hasClass("disabled")){
         return false;
    }
    else{
        $(".links").removeClass("disabled");
        $(this).addClass("disabled");
    }
});
})

我认为它会起作用

单击时如何禁用链接？

7 个答案: