禁用href标签

超链接没有disabled属性。如果你不想让某些东西被链接，那么你需要完全删除<a>标记。

或者你可以删除它的href属性-尽管这有其他的用户体验和可访问性问题，在下面的评论中指出，所以不建议。

你可以使用:

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

你需要删除<a>标签来摆脱这个。

或者试着使用:-

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

<a>标签没有disabled属性，这只适用于__abc2(以及<select>s和__abc4)。

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

$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
});
});

试试这个:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

如果你想摆脱指针，你可以使用光标在css中做到这一点。

适合我的变体:

<script>
function locker(){
if ($("a").hasClass("locked")) {
$("a").removeClass('locked').addClass('unlocked');
$("a").attr("onClick","return false");
} else {
$("a").css("onclick","true");
$("a").removeClass('unlocked').addClass('locked');
$("a").attr("onClick","");
}
}
</script>


<button onclick="locker()">unlock</button>


<a href="http://some.site.com" class="locked">
<div>
....
<div>
</a>

您可以使用以下解决方案之一:

超文本标记语言

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

在css的帮助下，您将禁用超链接。试试下面的方法

a.disabled {
pointer-events: none;
cursor: default;
}

<a href="link.html" class="disabled">Link</a>

当你将鼠标移到href标记上时，它中的任何内容都将显示在浏览器窗口的左下角。

我个人认为像javascript:无效(0)这样的东西显示给用户是可怕的。

相反，去掉href，使用jQuery/其他工具来施展你的魔法，并添加一个样式规则(如果你仍然需要它看起来像一个链接):

a {
cursor:pointer;
}

HTML:

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

CSS:

.btn-disabled,
.btn-disabled[disabled] {
opacity: .4;
cursor: default !important;
pointer-events: none;
}

你可以通过返回false来禁用锚标记。在我的情况下，我使用angular和ng-disabled的Jquery手风琴，我需要禁用部分。

所以我创建了一个小js片段来解决这个问题。

       <a class="opener" data-toggle="collapse"
data-parent="#shipping-detail"
id="shipping-detail-section"
href="#shipping-address"
aria-expanded="true"
ng-disabled="checkoutState.addressSec">
Shipping Address</a>
<script>
$("a.opener").on("click", function () {
var disabled = $(this).attr("disabled");
if (disabled === 'disabled') {
return false;
}
});
</script>

让父对象拥有pointer-events: none将像这样禁用子对象a-tag(要求div覆盖a并且宽度/高度不为0):

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

地点:

.disabled {
pointer-events: none;
}

可以在<a>标记上模拟禁用属性。

<a href="link.html" disabled="">Link</a>

a[disabled] {
pointer-events: none;
cursor: default;
}

在我的情况下，我使用

<a href="/" onClick={e => e.preventDefault()}>

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

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

正确使用按钮和链接。

•按钮激活网页上的脚本功能(对话框，展开/折叠区域)。

•链接带你到另一个位置，无论是到不同的页面或同一页面上的不同位置。

如果你遵循这些规则，就不会出现任何需要禁用链接的情况。即使你让一个链接看起来视觉残疾和空白点击

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

你不会考虑可访问性，屏幕阅读器会将其视为链接，视力受损的人会一直好奇为什么链接不起作用。

<a href="/" disabled="true" onclick="return false">123</a>

Just adding: This works in general, however it wont work if user has disabled javascript in browser.

1) You could optionally use Bootstrap 3 class on your anchor tag to disable the href tag, after integrating bootstrap 3 plugin do

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

或

我们不能直接禁用它，但我们可以这样做:

1. 添加type="button"。
2. 删除href=""属性。
3. 添加disabled属性，这样它就会显示通过改变光标来禁用它，并且它变得暗淡。

PHP的例子:

<?php
if($status=="Approved"){
?>
<a type="button" class="btn btn-primary btn-xs" disabled> EDIT
</a>
<?php
}else{
?>
<a href="index.php" class="btn btn-primary btn-xs"> EDIT
</a>
<?php
}
?>

你可以使用下面的代码在运行时使用javascript禁用链接

$ (' .page-link ') . css(“pointer-events”、“没有”);

技巧1:使用CSS pointer-events: none;

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

技巧1:使用Jquery $('selector').attr("disabled","disabled");

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

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

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

我能够使用ng-href三元操作实现所需的结果

<a ng-href="\{\{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

在哪里

a.is-disabled{
color: grey;
cursor: default;


&:hover {
text-decoration: none;
}
}

以下是禁用a标记的各种方法:

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

因为锚标签没有禁用属性。 如果你想在jQuery函数中停止锚标记行为，你可以在函数的开头使用下面的行:

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault()

我有一个:

<a href="#">This is a disabled tag.</a>

希望对你有所帮助;)

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

这个答案假设你正在使用jquery和引导，并使用另一个属性在禁用时临时存储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属性，它只是一个超链接的占位符。所有浏览器均支持!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

有一种简单干净方式，如下所示:

<a href="/shopcart/">


<button class="btn" disabled> Make an Order </button>


</a>

默认情况下，在<button>上拥有禁用属性不会让点击通过<button>元素直到<a>元素。所以<a>元素甚至不知道发生了一些点击。通过在<button>上添加/删除禁用属性进行操作。

如果你需要用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/