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或服务器等持久存储来保持页面状态的重新加载。

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

1 个答案: