현재 페이지 부분의 메뉴 색을 바꿈

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> 

사업부의 HTML (. 각 메뉴의 링크와 함께 갈 사업부가)

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

가

EDIT2

CSS :

나는 내가 #nav_list를 제거하면, 나는 처음부터 색상의 변화를 보이지 않는 것으로 나타났습니다

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

.

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

자바 스크립트

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