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”类位于链接上，则需要相应地修改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>

...但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并添加该类。同样，我不推荐它，但是使用您引用的网址，它应该可以使用。

以下原始答案是在我意识到（感谢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');
    });
});

jQuery事件处理程序中的

return false做了两件事：

阻止默认操作（在这种情况下，在链接后面）。
停止传播到祖先元素的事件。

preventDefault只做第一个。

Answer 2

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

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

Answer 3

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

Answer 4

<!DOCTYPE html> 
<html> 
<head> 

  <script src="http://code.jquery.com/jquery-latest.js"></script> 
   <script>

                $(document).ready(function() {
                    $('#home li').click(function() {
                        $('#home li').removeClass();
                        $(this).addClass('btnActive');
                    });
                });
            </script>


</head> 
<body> 
<ul id="home">
    <li>Home</li>
    <li>Apps</li>
    <li>Support</li>

</ul>
</body> 
</html>

jQuery addClass属性出现然后消失

4 个答案: