如何在點擊其他鏈接後撤消CSS更改

Question

我有4個鏈接在我的導航欄中，我想在點擊鏈接後更改CSS。但是，點擊另一個鏈接後，該鏈接不會更改回原始CSS。我怎樣才能做到這一點？

E.g.我點擊「關於我們」，CSS爲「關於我們」的變化，然後點擊「產品」，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/