我有一点麻烦与造型的活动链接，我不知道我在哪里出错。
HTML：

<div id="menu">
    <ul id="navigation">
        <li class="sup">
            <ul>
                <li class="menu"><a href="#home" title="Home" class="home">Home</a></li>
                <li class="menu"><a href="#work" title="Work" class="work">Work</a></li>
                <li class="menu"><a href="#about" title="About" class="about">About</a></li>
                <li class="menu"><a href="#skills" title="Skills" class="skills">Skills</a></li>
                <li class="menu"><a href="#contact" title="Contact" class="contact">Contact</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS：

#menu {
    width: 431px;
    float: right;
}

#navbar {
    clear:       both;
    width:       959px;
    margin:      0 auto;
    height:      40px;
    line-height: 40px;
}

#navigation ul {
    margin:              0;
    padding:             0;
    list-style:          none;
    background-image:    url(images/navi-bg.png);
    background-position: center top;
    background-repeat:   repeat;
}

#navigation li {
    text-align:  center;
    float:       left;
    margin-left: 20px;
}

#navigation li a {
    outline:         none;
    font-size:       18px;
    color:           #939393;
    text-decoration: none;
}

#navigation li a:hover {
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    -o-border-radius:      4px;
    -ms-border-radius:     4px;
    -khtml-border-radius:  4px;
    border-radius:         4px;
    background-color:      rgba(0, 0, 0, 0.042);
    border:                1px solid rgba(0, 0, 0, 0.15);
    color:                 #2D2D2D;
    margin:                0;
    border-image:          initial;
    padding-left:          7px;
    padding-right:         7px;
    padding-top:           3px;
    padding-bottom:        3px;
}

#navigation li a:active {
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    -o-border-radius:      4px;
    -ms-border-radius:     4px;
    -khtml-border-radius:  4px;
    border-radius:         4px;
    background-color:      rgba(0, 0, 0, 0.042);
    border:                1px solid rgba(0, 0, 0, 0.15);
    margin:                0;
    border-image:          initial;
    padding-left:          7px;
    padding-right:         7px;
    padding-top:           3px;
    padding-bottom:        3px;
    color:                 #939393;
}

JQUERY：

function loadStuff() {

    $("a").click(function () {
        var link = $(this).attr('href');

        $(".menu a").each(function () {
            $(this).css("color", "#939393");
        });

        if (link == "#home") {
            $("a.home").css("color", "#939393");
        }

        if (link == "#about") {
            $("a.about").css({"background-color":"yellow", "color":"#939393"});
        }

        if (link == "#work") {
            $("a.work").css("color", "#939393");

        }

        if (link == "#skills") {
            $("a.skills").css("color", "#939393");

        }

        if (link == "#contact") {
            $("a.contact").css("color", "#939393");
        }

        if (link == "#contact") {
            $("a.career").css("color", "#3d6b7b");
        }

    });

基本上，我试图实现的是有一个边界上的活动链接和黄色背景。我已经设法让它工作的'关于'活动链接，但当我点击一个不同的链接的黄色背景仍然显示在'关于'链接，我只希望它显示时，它的活动。