使用 jQuery 更改菜单栏上的选定项

Question

我有以下一组定义菜单栏的 html：

<ul id="menu-bar">
    <li class="active"><a href="/" id="home">Home</a></li>
    <li><a href="/Club/" id="club">Club Quarter</a></li>
    <li><a href="/Match/" id="match">Match Quarter</a></li>
    <li><a href="/History/" id="history">History Quarter</a></li>
</ul>

菜单栏具有红色背景，活动项目的背景设置为蓝色。

我有以下 jQuery 片段，它删除当前选定项目的活动类并将其放置在刚刚单击的新项目上。

$('#menu-bar > li').click(function () {
    $('li.active').removeClass('active');
    $(this).addClass('active');
});

当我单击一个新项目时，很大一部分时间，当前项目的背景变为红色，所选项目的背景变为蓝色。然后它立即恢复到现状。其他时候，由于页面更改正确，虽然点击已被识别，但什么也没有发生。

当我双击一个新项目时。更改如我预期的那样发生，尽管如果我检查 HTML，通常情况下，“class=active”仍然附加到默认的第一个项目，即使它的背景现在是红色并且点击的项目是蓝色的。

• 应该单击一下就可以得到我想要的效果还是我错过了 某物？
• 双击时，默认项现在怎么可能是红色的，即使它仍然是 设置为活动类？

Answer 1

当您单击列表元素时，您实际上是在单击锚点，该锚点又会重定向到另一个页面，您的所有 javascript 都会在该页面被重置并重新从头开始？

您根本无法动态设置类、重定向，然后期望类仍被添加到元素中。当您重定向时，一切都会丢失。您必须对每个页面上的活动菜单项进行硬编码，或者使用 cookie、localStorage 或服务器等持久存储来保持页面在重新加载时的状态。