如何使用 CSS 或 jquery 使链接不可点击？ [复制]

Posted 2023-05-07

【中文标题】如何使用 CSS 或 jquery 使链接不可点击？ [复制]

【英文标题】：How to make link unclickable using CSS or jquery? [duplicate]

【发布时间】：2014-01-10 18:31:37

【问题描述】：

我有以下 html。

<ul class="static">
    <li class="static dynamic-children">
        <a class="static dynamic-children menu-item" href="test.php" tabindex="0">
            <span class="additional-background">
                <span class="menu-item-text">Link</span>
            </span>
        </a>
        <ul class="dynamic">
        </ul>
     </li>
</ul>

正如您所见，当我单击“链接”时，它会将我带到“test.php”页面。我希望这个“链接”像您放置“#”一样不可点击，例如href="#"

是否可以使用 CSS 或 Jquery 来做到这一点？无法使用 javascript 的 document.getElementById，因为没有为该元素定义 ID。

【参考方案1】：

不同的选择：

$('a[href="test.php"]').click(function()
    return false;
);

或

$("static dynamic-children a.menu-item").click(function()
    return false;
);

您还可以使用event.preventDefault() 来防止链接的默认/预期行为。像这样使用：

$("static dynamic-children a.menu-item").click(function(event)
    event.preventDefault();
);

【参考方案2】：

写return false

$("a.menu-item").click(function()
    return false;
);

或

e.preventDefault()

$("a.menu-item").click(function(e)
    e.preventDefault();
);

【参考方案3】：

您可以通过点击此链接触发preventDefault()来取消链接行为：

$("a.menu-item").click(function(evt)
    evt.preventDefault();
);

【讨论】：

不要忘记添加一些解释@dcodesmith。不知从哪里粘贴的一堆代码不是教学法。

@MaximeLorant 你打败了我，我想发布解决方案，然后详细说明。干杯;