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

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。）

EDIT2

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;
});