0

我有以下一组定义菜单栏的 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”仍然附加到默认的第一个项目，即使它的背景现在是红色并且单击的项目是蓝色的。

  • 是否应该单击一下给我想要的效果，还是我错过了什么？
  • 双击后，即使默认项目仍设置为活动类，它现在如何变为红色？
4

1 回答 1

0

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

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

于 2013-06-05T10:06:40.630 回答