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