css链接和jquery

嗨我有一些麻烦与主动链接的样式，我不知道我错了。css链接和jquery

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

    });

基本上我想实现的是有主链路上的边界和一个黄色背景。我设法让它在'大约'活动链接上工作，但是当我点击不同的链接时，黄色背景仍显示在'约'链接上，我只希望它在活动时显示。

我希望这是有道理的，任何帮助将不胜感激。

谢谢

来源

2012-02-27 PK333

你可以做一个小提琴？ – Unknown 2012-02-27 11:14:07

如果你的Javascript代码有缩进，你会注意到你错过了''（'a“）的关闭'}'。click（function（）{' - EDIT - Sorry，my bad。You're ''丢失'loadStuff'的结尾 – Weetu 2012-02-27 11:16:36

基本上你需要两个css类，一个用于主动链接，另一个用于非活动链接。无论何时用户点击任何链接，只需将活动类应用到用户点击的链接并将非活动类应用于其余链接 – 2012-02-27 11:16:41