jquery - CSS 链接和 jQuery

Question

我在使用事件链接设置样式时遇到了一些麻烦，我不确定哪里出错了。

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

    });

基本上我想要实现的是在事件链接上有一个边框和一个黄色背景。我已经设法让它在“关于”事件链接上工作，但是当我点击另一个链接时，黄色背景仍然显示在“关于”链接上，我只希望它在事件时显示。

Answer 1

点击时使用removeClass() 和addClass()。

我已经编辑了你的代码 - http://jsfiddle.net/wqNmT/

铝