jquery - 別のリンクをクリックした後に CSS の変更を元に戻す方法

Question

ナビゲーションに 4 つのリンクがあり、リンクをクリックした後に CSS を変更したいと考えています。ただし、別のリンクをクリックしても、リンクは元の CSS に戻りません。これどうやってするの？

たとえば、「About Us」をクリックすると、「About Us」の CSS が変更され、次に「Products」をクリックすると、「Products」の CSS が変更されます。「About Us」を元の 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

このようなもの。

http://jsfiddle.net/bPeAm/

Answer 2

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