Jquery 切换页面当前部分的菜单颜色

我正在创建一个单页站点，其中的菜单是固定的，因此当用户单击链接时，它会向下滚动到页面的该部分。用户所在部分的菜单链接应具有不同的颜色。为此，我有一个类“current”。我试图用jQuery addClass（）和removeClass（）进行更改，但运气不好。到目前为止，我的代码如下

$(document).ready ( function(){
    $(".about").click(function(){
        $(".home").removeClass("current");
        $(".about").addClass("current");
    });
});

编辑：

菜单HTML：

<nav id="nav_list">
<ul>
<li class="home current"><a href="#">Home</a></li>
<li class="about"><a href="#about">About</a></li>
<li class="portfolio"><a href="#portfolio">Portfolio</a></li>
<li class="testimonials"><a href="#testimonials">Testimonials</a></li>
<li class="contact"><a href="#contact">Contact</a></li>
</ul>
</nav>

---

我注意到，如果删除“导航”列表，从一开始就看不到颜色的变化。

试试这个-它会从所有列表项中删除当前类，并将该类添加到单击的列表项中

$("li").click(function(){
    $(".current").removeClass("current");
    $(this).addClass("current");
});

但要回答您的特定用例。将链接设置为显示为块。这会导致它们填充列表项容器。然后监视链接单击，而不是列表项单击。之前发生的事情是，单击链接不会触发对列表项容器的单击，因此您的添加/删除类代码可能从未触发。通过让它填满你捕获所有点击的区域

css

javascript

$("a").click(function(){
    $(".current").removeClass("current");
    $(this).parent().addClass("current");
    return false;
});

---

它在这里工作。那为什么它在我使用它的地方不工作…你有我们可以检查的实时链接吗？也许你可以添加一些CSS——这可能是个问题，而不是没有添加类。当你自己添加这个类时，它是否能像预期的那样工作？对不起，我没有这个页面的实时版本。这与CSS无关。您已经说过，如果以

关于当前

开始页面，则

关于

链接将获得

当前

中设置的颜色。所以问题出在你的JQuery上，而不是你给我们的JQuery上——你的代码肯定在其他地方有错误。@Connor——刚刚更新了我的答案，看看这是否会让senseI更感兴趣——它已经设置为display:block。我还尝试了更新的代码，但仍然不起作用。@Connor-你能定义“不起作用”吗？没有添加类吗？类已添加，但样式未更改？样式未更改（由.current指定的新颜色未显示）。听起来问题在于css而不是jQuery。如果使用Chrome或FF w/firebug，则可以在列表项上单击鼠标右键，然后选择“检查元素”。在弹出的调试器窗口中，展开“样式”框，查看样式被覆盖的位置

$("li").click(function(){
    $(".current").removeClass("current");
    $(this).addClass("current");
});

a { text-decoration: none; display: block; }
li { padding: 4px; border: 1px solid gray; width: 100px; float: left; }
.current { border: 1px solid red; }

$("a").click(function(){
    $(".current").removeClass("current");
    $(this).parent().addClass("current");
    return false;
});