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

Question

我正在制作一个单页网站，其中菜单是固定的，因此当用户单击链接时，它会向下滚动到页面的该部分。用户所在部分的菜单链接应具有不同的颜色。为此，我有“当前”课程。我正在尝试使用 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>

div HTML：（

<div id="about" class="page">
<p>Lorem ipsum dolor sit</p>
</div>

每个菜单链接都有一个 div。）

编辑2

css：

#nav_list .current a{
color: #D4D1FA;
}

我注意到，如果删除#nav_list，我不会从一开始就看不到颜色的变化。

Answer 1

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

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

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

http://jsfiddle.net/hkZsL/

css

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

javascript

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