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

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

1 个答案: