다른 링크를 클릭 한 후 CSS 변경을 취소하는 방법

Question

내 탐색에 4 개의 링크가 있으며 링크를 클릭 한 후 CSS를 변경하고 싶습니다. 그러나 다른 링크를 클릭하면 링크가 원래 CSS로 변경되지 않습니다. 어떻게해야합니까?

예. 나는 "About Us"를 클릭하고, "About Us"변경을위한 CSS는 "Products"를, "Products"는 CSS를 변경합니다. 어떻게 "우리는 정보"원래 CSS로 복귀 할 수있다 "

HTML :

<div id="nav"> 
<ul> 
    <li><a href="#page1">&nbsp;Home&nbsp;</a></li> 
    <li><a href="#page2">&nbsp;About Us&nbsp;</a></li> 
    <li><a href="#page3">&nbsp;Products&nbsp;</a></li> 
    <li><a href="#page4">&nbsp;Contact Us&nbsp;</a></li> 
</ul> 

jQuery를 :

$(function() { 
    $("#nav li a").click(function() { 
     $(this).css({'color': 'black', 'border-bottom': '3px dotted black', 'background-color': 'yellow'}); 
    }); 
}); 

Answer 1

jQuery를 사용하여 CSS를 적용하는 것은 또 다른를 추가하는 대신 스타일 시트의 클래스 :

nav li a.active { 
    color:black; 
    border-bottom:3px dotted black; 
    background-color:yellow; 
} 

다음 jQuery로 전환하십시오.

$(function() { 
    var navLinks = $("#nav li a"); 
    navLinks.click(function() { 
     navLinks.removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

Answer 2

이와 비슷한 기능을 제공합니다.

http://jsfiddle.net/bPeAm/