jQuery addClass属性出现然后消失

Question

我有一个包含3个项目的列表,我已经创建了一个jQuery click事件来为它添加一个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"级是链路上加载页面时,您将需要修改的在HTML home.php,apps.php以及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 就是第一个.