1

我的页面中有 4 个链接（.phtml 文件），如下所示

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

但他们没有达到目的。

还有其他方法可以解决吗？

4

6 回答 6

0

我会使用这个 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/

于 2014-08-01T10:55:02.960 回答
0

我不确定这是最好的方法，但它可以解决问题，

如果你使用

pointer-events: none; in your css

或者如果你想从 javascript 调用它：

elem.style.display.pointerEvents = "none";

禁用与您的用户的交互。

于 2014-08-01T10:55:15.037 回答
0

即使这也达到了目的

$("#fileMenu").disableContextMenuItems('#add');
  $("#fileMenu").disableContextMenuItems('#rename');
  $("#fileMenu").disableContextMenuItems('#delete');

因为我在我的 ul 列表中使用 contextMenu 类。

于 2014-08-06T05:10:13.140 回答
0

使用指针事件：无；

<a  style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>
于 2014-08-01T10:49:30.170 回答
0

如果您使用的是 jQuery，您可能想要这样做

$(function() {
 $('#addbtn').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
 });
}

更多信息，Stackoverflow 问题

于 2014-08-01T10:53:07.473 回答
0

有几个选项。使用普通的旧 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>

虽然，IE <= v9（如果我是正确的）不支持这一点并不会让您感到惊讶......而且在大多数浏览器上，您不能强制浏览器使用指针作为光标......

一切尽在小提琴演示中！

于 2014-08-01T11:00:21.603 回答