1

我有一个包含 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');
    });
});
4

4 回答 4

8

更新答案：

当你点击一个链接时，页面的整个 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在末尾剥离），然后将其用作 anid并添加类。同样，我不推荐它，但是使用您引用的 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只做第一个。

于 2012-05-25T09:08:47.227 回答
2

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

$(document).ready(function() {
    $('#home').click(function (e){
        e.preventDefault();
        $(this).addClass('btnActive');
    });
});
于 2012-05-25T09:09:08.383 回答
1 
$(document).ready(function() {
    $('#home').click(function (e){
        e.preventDefault(); 
        e.stopPropagation();
        $(this).addClass('btnActive');
    });
});
于 2012-05-25T09:09:45.103 回答
-1 
<!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>
于 2012-05-25T09:25:45.770 回答