jQuery - 在点击时向li添加类

Question

我有以下标记

<div id="div1">
   <ul>
      <li><a href="#" id="id1">link1</a></li>
      <li><a href="#" id="id2">link2</a></li>
      <li><a href="#" id="id3">link3</a></li>
   </ul>
</div>

我想使用jQuery为点击的链接添加一个类,并从之前点击的链接中删除该类,例如

<li class="selected"><a href="#" id="id1">link1</a></li>
<li><a href="#" id="id2">link2</a></li>
<li><a href="#" id="id3">link3</a></li>

Answer 1

试试这个:

$('#div1 li').click(function(e) {
    $(this).addClass('selected').siblings().removeClass('selected');
});

或者,如果要将click事件附加到a:

$('#div1 a').click(function(e) {
    e.preventDefault();
    $('#div1 a').removeClass('selected');
    $(this).addClass('selected');
});

示例小提琴