尽管该链接被禁用,但它仍然是可点击的。
<a href="/" disabled="disabled">123n</a>
如果它是禁用的,我可以使它不可点击吗?我应该使用JavaScript吗?
尽管该链接被禁用,但它仍然是可点击的。
<a href="/" disabled="disabled">123n</a>
如果它是禁用的,我可以使它不可点击吗?我应该使用JavaScript吗?
当前回答
如果你正在使用WordPress,我创建了一个插件,可以做到这一点,而且不需要知道如何编码任何东西。你所需要做的就是添加你想要禁用的链接的选择器,然后从出现的下拉菜单中选择“在新选项卡中禁用使用此选择器的所有链接”,然后单击更新。
点击这里查看演示这一点的动图
你可以从WordPress.org插件库中获得免费版本来尝试一下。
其他回答
您可以在<a>标记上模拟禁用属性。
<a href=" Link .html" disabled="">Link</a> .html
a[disabled] {
pointer-events: none;
cursor: default;
}
你可以通过返回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>
正确使用按钮和链接。
•按钮激活网页上的脚本功能(对话框,展开/折叠区域)。
•链接带你到另一个位置,无论是到不同的页面或同一页面上的不同位置。
如果你遵循这些规则,就不会出现任何需要禁用链接的情况。即使你让一个链接看起来视觉残疾和空白点击
<a href=“” ng-click=“Ctrl._isLinkActive &&$ctrl.gotoMyAwesomePage()”
你不会考虑可访问性,屏幕阅读器会将其视为链接,视力受损的人会一直好奇为什么链接不起作用。
如果你需要用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/
有一种简单干净的方法:
<a href="/shopcart/">
<button class="btn" disabled> Make an Order </button>
</a>
默认情况下,在<button>上禁用属性不会让点击通过<button>元素直到<a>元素。所以<a>元素甚至不知道发生了一些点击。通过在<button>上添加/删除禁用属性进行操作。