禁用 php-javascript 中的 href 链接
-
02-01-2020 - |
题
我的页面(.phtml 文件)中有 4 个链接,如下所示
<ul id="fileMenu" class="contextMenu">
<li class="add"><a id ="addbtn" href="#add" style="display:none;">Add</a></li>
<li class="download"><a href="#download">Download</a></li>
<li class="rename"><a href="#rename">Rename</a></li>
<li class="del"><a href="#delete">Delete</a></li>
<li class="copypath"><a href="#copypath">Copypath</a></li>
</ul>
我想禁用添加、重命名和删除链接只需从 UI 中禁用它即可 .
用户应该能够看到它,但不应执行任何点击事件(链接应呈灰色)。
我用过
disable="disabled"
display =none;
但它们并没有达到目的。
还有其他方法可以解决这个问题吗?
解决方案
我会使用这个 CSS 来直观地禁用链接:
.disable {
position: relative;
}
.disable:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.disable a {
color: gray;
cursor: default;
}
然后为了禁用链接,您需要放置一个类 disable
上相应的 li
:
<li class="download disable"><a href="#download">Download</a></li>
它的作用基本上是用透明伪元素覆盖链接 :before
.
另一种解决方案可以使用 pointer-events: none
规则,但在 IE 中并没有得到很好的支持。
演示: http://jsfiddle.net/LPz2Z/1/
其他提示
如果您使用的是jQuery,您可能希望执行此操作
$(function() {
$('#addbtn').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
}
.
我不确定这是最好的方式,但它可以做这个技巧,
如果使用
pointer-events: none; in your css
.
或者如果您想从javascript调用它:
elem.style.display.pointerEvents = "none";
.
与用户禁用互动。
使用指针事件:无;
<a style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>
. 有一些选择。使用普通的旧javascript,您可以做到,例如:
<a href="mylink.html" onclick="return false;">Download</a>
.
或
<a href="javascript: void(0);">Download</a>
.
使用jQuery,您可以轻松禁用大量链接:
<a href="mylink.html" class="disabled">Download</a>
<a href="anotherlink.html" class="disabled">Delete</a>
<script>
jQuery(document).ready(function($) {
$('a.disabled').on('click', function(e) {
e.preventDefault();
});
});
</script>
.
,您甚至可以使用CSS!
<a href="mylink.html" class="disabled">Download</a>
<style type="text/css">
a.disabled { pointer-events: none; }
</style>
.
虽然,它不会让你感到惊讶,即<= v9(如果我是正确的)不支持这个......而在大多数浏览器上,你不能强迫浏览器使用指针作为光标。..
即使是这个目的
$("#fileMenu").disableContextMenuItems('#add');
$("#fileMenu").disableContextMenuItems('#rename');
$("#fileMenu").disableContextMenuItems('#delete');
.
我在我的UL列表中使用ContextMenu类。
不隶属于 StackOverflow