禁用 php-javascript 中的 href 链接

StackOverflow https://stackoverflow.com//questions/25078541

  •  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 中禁用它即可 .

用户应该能够看到它，但不应执行任何点击事件（链接应呈灰色）。

我用过

  1. disable="disabled"

  2. 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
 });
}
.

更多信息，stackoverflow问题

我不确定这是最好的方式，但它可以做这个技巧，

如果使用

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top