检测是否已单击链接并应用其他CSS类(如果已有)

Question

所以我想要做的是确定当前链接是否"活动",即用户是否只是点击了此链接.

如果是,那么我想应用class=selected到该<li>项目.

所以这就是我正在使用的:

<ul>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a></li>
   <li><a href="#">Link 5</a></li>
</ul>  

如果选择了链接,我希望<li>看起来像这样:

<li class="selected"><a href="#">Link 1</a></li>

所以唯一的区别是,有一个类应用于它,而另一个没有.

我想在一个erb文件中这样做.所以Ruby会成为首选的语言......但是,它不是Rails(确切地说是Sinatra).

谢谢.

编辑1

使用jQuery可能是必要的,这很好.

Answer 1

像这样的jQuery应该适合你

$(function(){
  $("a").click(function(){
    $("a").removeClass("selected")
    $(this).addClass("selected")
    return false;
  })
})

如果您希望这适用于一组非常特定的链接,可以为选择器添加更多内容.

例如,假设ul有一个id头

<ul id="header">
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a></li>
   <li><a href="#">Link 5</a></li>
</ul> 

然后你的jQuery应该是这样的

$(function(){
  $("#header a").click(function(){
    $("#header a").removeClass("selected")
    $(this).addClass("selected")
    return false;
  })
})