切換頁面當前部分的菜單顏色

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去與每個菜單鏈接）

<div id="about" class="page"> 
<p>Lorem ipsum dolor sit</p> 
</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; 
});