jQuery addClass属性出现，然后消失

我有一个包含3个项目的列表，我制作了一个jqueryclick事件来向其中添加一个css类。 但是，当我单击其中一个项目时，class属性被设置，但随后立即消失

你知道为什么吗

代码：

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

---

更新的答案：

当您跟随一个链接时，页面的整个DOM被拆掉并扔掉，取而代之的是通过读取新页面的HTML创建的DOM。因此，对旧DOM所做的更改不会持久。如果希望加载页面时“btnActive”类位于链接上，则需要相应地修改

home.php

、

apps.php

和

support.php

页面的HTML

例如，对于

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>

<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）你可能真的需要关注这个链接之前给出的

原始答案：

因为您从未告诉浏览器不要跟随链接，所以页面会被重新加载

您可以通过执行

返回false来修复它退出事件处理程序：

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

在jQuery事件处理程序中返回false
有两个功能：

阻止默认操作（在本例中，跟随链接）

停止传播到祖先元素的事件

preventDefault
只做第一个。
更新的答案：

当您跟随一个链接时，页面的整个DOM被拆掉并扔掉，取而代之的是通过读取新页面的HTML创建的DOM。因此，对旧DOM所做的更改不会持久。如果希望加载页面时“btnActive”类位于链接上，则需要相应地修改
home.php
、
apps.php
和
support.php
页面的HTML

例如，对于
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>

<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）你可能真的需要关注这个链接之前给出的

原始答案：

因为您从未告诉浏览器不要跟随链接，所以页面会被重新加载

您可以通过执行
返回false来修复它退出事件处理程序：

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

在jQuery事件处理程序中返回false
有两个功能：

阻止默认操作（在本例中，跟随链接）

停止传播到祖先元素的事件

preventDefault
只执行第一个操作。
您需要阻止加载“home.php”的链接：

您需要阻止加载“home.php”的链接：


$（文档）.ready（函数（）{
$（'#home li'）。单击（函数（）{
$（'#home li'）.removeClass（）；
$（this.addClass（'btnActive'）；
});
});

家
应用程序
支持


$（文档）.ready（函数（）{
$（'#home li'）。单击（函数（）{
$（'#home li'）.removeClass（）；
$（this.addClass（'btnActive'）；
});
});

家
应用程序
支持

我怀疑这就是问题所在，但似乎需要单击。我认为问题中代码的实际逻辑是有缺陷的。@RoryMcCrossan:嗯，是的，看看标记，我怀疑你是对的。非常感谢你的快速回答！标记为已回答。我怀疑这就是问题所在，但似乎需要单击。我认为问题中代码的实际逻辑是有缺陷的。@RoryMcCrossan:嗯，是的，看看标记，我怀疑你是对的。非常感谢你的快速回答！标记为已回答。