logo标签列表

禁用 href 标签

javascripthtml
396

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

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

如果禁用了，我可以使它不可点击吗？是否必须使用JavaScript？

3
请参考 https://dev59.com/G3I95IYBdhLWcg3w7CnL ，使用CSS禁用一个链接。 - Fred Foo
仅供澄清：我的猜测是你已经禁用了链接，但"点击"事件仍然触发了？ - Levi Hackwith
2
你可以在CSS中使用pointer-events:none;。 - ppsreejith
4
你可以使用 preventDefault()。https://dev59.com/RXM_5IYBdhLWcg3wfTO7 - Ciack404
但是为什么不直接删除href属性呢？ - MrBoJangles
30个回答
519

通过使用 CSS，您可以禁用超链接。请尝试以下方法：

a.disabled {
  pointer-events: none;
  cursor: default;
}
<a href="link.html" class="disabled">Link</a>

4
请注意，此功能仅适用于Internet Explorer 11+。 - Patrick Hillert
61
使用Tab键聚焦到链接标签，并按Enter键时，这个属性不起作用。 - Majid Basirati
2
这也会禁用悬停事件，这意味着光标样式不起作用。（<span>⃠</span> <- 在您的禁用链接上没有这些。） - Seth Battin
3
也可以使用透明度来区分启用和禁用状态的链接。opacity: 0.5; - Aamer Shahzad
3
我知道这是一个旧帖子，但我想给出一个简单的解决方案来解决标签问题。您可以在锚点标签内部始终使用 tabindex="-1" 以禁用它。 - Brayam Valero
显示剩余6条评论
313
27
如果你保留现有的CSS样式，虽然能实现功能，但我认为这会导致用户体验变差。用户可能会点击它并认为出了故障。你应该避免让用户对发生的事情感到困惑。 - agm1984
只需将cursor: none;添加到相关链接中，似乎可以实现与cursor: none; pointer-events: none;同样的效果......无论如何，这使我能够在单页应用程序网站中更改页面。 - Trunk
2
即使您使用CSS光标或指针事件，链接仍然可以通过键盘导航聚焦和“点击”（使用Enter），这可能不是很好，如果您想禁用某些内容。要么删除href属性，要么将其转换为span元素。 - tbjgolden
5
您可以在锚点标签中添加 onclick="return false;"，并可能添加一个 title 属性来解释该链接无效。 - Craig London
1
此外，我认为仅清除 href 并保留 <a> 不符合 ADA 标准。 - SlothFriend
如果您正在使用PHP，您可以在禁用属性旁边输出href。例如，如果（$status == approved），则可以echo 'disabled= "" href = "#" '。非常简单但有效。 - Asuquo12
101

你可以使用：

<a href="/" onclick="return false;">123n</a>
7
如果已经有一个函数作为点击事件的处理程序，那么这将不起作用。 - rahul shukla
@rahulshukla 有捕获事件可以提前捕获事件。(https://javascript.info/bubbling-and-capturing) - janispritzkau
86

你可以使用以下其中一种解决方案：

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>
45

试试这个：

<a href="javascript:void(0)" style="cursor: default;">123n</a>
1
正确，我总是使用href="javascript:void(0)"。 - Jan Hamara
2
这也是一个不错的点子，如果你仍然想保留右键功能，比如“复制链接”。 - Developer SPM
href='javascript:;' - 已经足够了 - href="javascript冒号分号" - jumper rbk
23

HTML：

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS：

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}
可能这是Bootstrap的最佳选择。 - Abel Callejo
23

<a>标签没有disabled属性，该属性只适用于<input>标签（以及<select>和<textarea>标签）。

要"禁用"链接，可以删除其href属性或添加一个返回false的点击处理程序。

@rocket 删除 href 属性会有什么影响吗？我的意思是，它应该是一个必需的属性。不过现在似乎这种事情并不重要。 - Ringo
@Ringo：移除 href 可能会导致当你将鼠标悬停在上面时光标不会改变。 - gen_Eric
17

提示1：使用CSS pointer-events: none;

提示2：使用JavaScript javascript:void(0) （这是最佳实践）

<a href="javascript:void(0)"></a>

提示1：使用Jquery $('选择器').attr("disabled","disabled");

15

你需要删除 <a> 标签才能消除这个问题。

或者尝试使用：

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

如果让父元素使用pointer-events: none，将会禁用子元素的标签，如下所示（需要确保div覆盖了a，并且没有0宽度/高度）：

<div class="disabled">
   <a href="/"></a>
</div>

其中：

.disabled {
    pointer-events: none;
}
您也可以直接将“pointer-events:none”样式应用于<a>标签，例如在您想要禁用它时通过javascript添加.disabled类。不需要包装<div>。 - Les Nightingill
不需要包装，如此演示：https://jsfiddle.net/d1owm1d0/1/ 适用于Chrome、Firefox和Safari。您是否使用了我的演示失败的不同浏览器？ - Les Nightingill
@LesNightingill 如果a标签包裹了某些内容，它就无法工作：https://jsfiddle.net/d9gwgdyf/ - Ferus
那是正确的@Ferus。我不确定为什么这是真的。 - Les Nightingill
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接