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

示例小提琴

Answer 2

你可以这样做：

$('li a').click(function() {
    $('li a').removeClass('selected');
    $(this).addClass('selected');
});

即先删除所有类，然后将类添加到已单击的类中。