jquery - 检测链接是否被点击，如果点击了则应用不同的 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 header

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