Javascript 使用jQuery更改CSS类

我试图通过使用jQuery将css类重新分配给列表项，来显示单击时哪个菜单项是活动的。我在网上看了一些例子，并尝试了一些不同的例子，但我似乎根本无法让我的工作。有人能看看我上次尝试的代码，告诉我我做错了什么吗？谢谢你的帮助

头标记中的脚本：

<script type="text/javascript" src="script/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#topnavi ul li a").click(function () {
            if ($(this).parent("li").hasClass(".select"))
                $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
            $(this).parent("li").removeClass(".norm").addClass(".select");
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#topnavi ul li a”）。单击（函数（）{
if（$（this.parent（“li”）.hasClass（.select”））
$（“#topnavi ul li a”）.parent（“li”）.removeClass（“.select”）.addClass（“.norm”）；
$（this）.parent（“li”）.removeClass（.norm”）.addClass（.select”）；
});
});

HTML:

---

单击列表项中的新锚点时，我希望将“norm”类指定给先前选择的锚点周围的列表项，并将“select”类指定给新选择的锚点周围的列表项。

使用

hasClass

时，不需要在类名前加点，

addClass

和

removeClass

改变

到

---

使用

hasClass

、

addClass

和

removeClass

时，不需要在类名前加上点
改变

到

---

使用

hasClass

、

addClass

和

removeClass

时，不需要在类名前加上点
改变

到

---

使用

hasClass

、

addClass

和

removeClass

时，不需要在类名前加上点
改变

到

---

结合Tobias的回答，您可能希望在这部分代码中添加一些括号

if ($(this).parent("li").hasClass(".select")) {
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
    $(this).parent("li").removeClass(".norm").addClass(".select");
}

---

或者类似的东西。您还可以使用.toggleClass（）而不是删除和添加类

结合Tobias的回答，您可能希望在这部分代码中添加一些括号

if ($(this).parent("li").hasClass(".select")) {
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
    $(this).parent("li").removeClass(".norm").addClass(".select");
}

---

或者类似的东西。您还可以使用.toggleClass（）而不是删除和添加类

结合Tobias的回答，您可能希望在这部分代码中添加一些括号

if ($(this).parent("li").hasClass(".select")) {
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
    $(this).parent("li").removeClass(".norm").addClass(".select");
}

---

或者类似的东西。您还可以使用.toggleClass（）而不是删除和添加类

结合Tobias的回答，您可能希望在这部分代码中添加一些括号

if ($(this).parent("li").hasClass(".select")) {
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
    $(this).parent("li").removeClass(".norm").addClass(".select");
}

---

或者类似的东西。您还可以使用.toggleClass（）而不是删除和添加类

除了托拜厄斯已经提到的，还有改变

if ($(this).parent("li").hasClass(".select"))
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
$(this).parent("li").removeClass(".norm").addClass(".select");

到

---

这将确保

select

类仅分配给所选

li

，其余

li

元素将具有

norm

类。

添加到Tobias已经提到的内容中，更改

if ($(this).parent("li").hasClass(".select"))
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
$(this).parent("li").removeClass(".norm").addClass(".select");

到

---

这将确保

select

类仅分配给所选

li

，其余

li

元素将具有

norm

类。

添加到Tobias已经提到的内容中，更改

if ($(this).parent("li").hasClass(".select"))
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
$(this).parent("li").removeClass(".norm").addClass(".select");

到

---

这将确保

select

类仅分配给所选

li

，其余

li

元素将具有

norm

类。

添加到Tobias已经提到的内容中，更改

if ($(this).parent("li").hasClass(".select"))
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
$(this).parent("li").removeClass(".norm").addClass(".select");

到

---

这将确保

select

类仅分配给所选的

li

，其余

li

元素将具有

norm

类。

我删除了推荐位置的点，并按照Killswitch的建议执行了操作。现在，当我单击菜单项时，与“select”类相关联的样式将更改为所选项，但一旦页面完全加载，它将切换回主菜单项。有什么想法吗？你所说的“完全加载”是指当你点击链接后加载新页面时？因为当页面重新加载时，所有jQuery事件/类/样式都会重置。是的，我单击链接&新链接不保留select类的属性&返回到主链接。当我删除主页链接上硬编码的选择类时，当我单击一个新链接时，选择类属性似乎就会出现和消失。链接应该保持红色，直到我点击另一个链接。您能简要解释一下页面加载时jQuery事件等重置的含义吗？谢谢jQuery效果仅在页面刷新或加载新页面之前暂时有效。您必须在后端（可能是PHP）处理您的问题。重新加载页面时，浏览器不记得类。它只是呈现从服务器检索的新html代码。因此，您需要根据用户在服务器端网站上的位置来管理动态类。我删除了推荐位置上的点，并按照Killswitch的建议进行了操作。现在，当我单击菜单项时，与“select”类相关联的样式将更改为所选项，但一旦页面完全加载，它将切换回主菜单项。有什么想法吗？你所说的“完全加载”是指当你点击链接后加载新页面时？因为当页面重新加载时，所有jQuery事件/类/样式都会重置。是的，我单击链接&新链接不保留select类的属性&返回到主链接。当我删除主页链接上硬编码的选择类时，当我单击一个新链接时，选择类属性似乎就会出现和消失。链接应该保持红色，直到我点击另一个链接。您能简要解释一下jQuery事件等的含义吗