jQuery addClass 属性出现然后消失

Question

我有一个包含 3 个元素的列表，我制作了一个 jQuery 单击事件以向其添加一个 css 类。 但是当我单击其中一个元素时，类属性已设置但之后直接消失。

有什么想法吗？

代码:

<ul>
    <li><a id="home" href="home.php">Home</a></li>
    <li><a id="apps" href="apps.php">Apps</a></li>
    <li><a id="support" href="support.php">Support</a></li>
</ul>

$(document).ready(function() {
    $('#home').click(function (){
        $(this).addClass('btnActive');
    });
});

Answer 1

更新的答案:

当您点击链接时，页面的整个 DOM 将被拆除并丢弃，取而代之的是通过读取新页面的 HTML 创建的 DOM。因此，您对旧 DOM 所做的更改不会持续存在。如果您希望“btnActive”类在页面加载时出现在链接上，您需要修改 home.php、apps.php 的 HTML , 和相应的 support.php 页面。

例如，对于 home.php:

<ul>
    <li><a id="home" href="home.php" class="btnActive">Home</a></li>
    <li><a id="apps" href="apps.php">Apps</a></li>
    <li><a id="support" href="support.php">Support</a></li>
</ul>

...但对于 apps.php:

<ul>
    <li><a id="home" href="home.php">Home</a></li>
    <li><a id="apps" href="apps.php" class="btnActive">Apps</a></li>
    <li><a id="support" href="support.php">Support</a></li>
</ul>

或者，您可以在页面加载时使用 JavaScript 添加基于 location.href 的类，但实际上修改 HTML 更好。但只是为了完整起见，因为您对链接的 id 和页面名称使用相同的值，您可以这样做:

$(document).ready(function() {
    var id = location.href.replace(/.*\/([\w]+)\.php$/, '$1');
    if (id) {
        $("#" + id).addClass("btnActive");
    }
});

将页面名称与 URL 隔离(忽略任何通向它的路径，并在末尾剥离 .php)，然后将其用作 id 并添加类。同样，我不推荐它，但是对于您引用的 URL，它应该可以工作。

以下原始答案是在我意识到(感谢 Rory)您可能真的需要点击该链接之前。

原始答案:

因为您永远不会告诉浏览器不要访问该链接，所以页面会重新加载。

您可以通过在事件处理程序中执行 return false; 来修复它:

$(document).ready(function() {
    $('#home').click(function (){
        $(this).addClass('btnActive');
        return false;  // <=== The new bit
    });
});

...或接受 event 参数并调用 preventDefault在上面:

$(document).ready(function() {
    // Accept the arg ---------v
    $('#home').click(function (event){
        // call the preventDefault
        event.preventDefault();
        $(this).addClass('btnActive');
    });
});

return false 在 jQuery 事件处理程序中做两件事:

1. 阻止默认操作(在这种情况下，点击链接)。

2. 停止向祖先元素传播事件。

preventDefault 只做第一个。