jQuery:在li元素之间添加/删除类的最简单方法

Question

我有一个链接列表,我想使用jQuery将点击的链接设置为活动状态,并让其余的链接删除它们的类.

我目前的设置是这样的:

HTML

<ul>
  <li id="li_1" class="active"><a href="#" id="link1">link 1</a></li>
  <li id="li_2"><a href="#" id="link2">link 2</a></li>
  <li id="li_3"><a href="#" id="link3">link 3</a></li>
</ul>

jQuery的

$("#link1").click(function () {
  $("#li_1").removeClass('active');
  $("#li_2").removeClass('active');
  $("#li_3").addClass('active');
});
$("#link2").click(function () {
  $("#li_1").addClass('active');
  $("#li_2").removeClass('active');
  $("#li_3").removeClass('active');
});
$("#link3").click(function () {
  $("#li_1").removeClass('active');
  $("#li_2").addClass('active');
  $("#li_3").removeClass('active');
});

显然这至少不是很好,我想让它成为一个非常简单和灵活的1-2衬里功能.我知道这是可能的,但不幸的是我没有jQuery-fu,我知道很多人都这样做:)

Answer 1

$('ul > li > a').click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
    return false;
});

或者更好的方法是在以下位置放置ID <ul>:

$('#myUL > li > a').click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
    return false;
});

• http://api.jquery.com/parent/
• http://api.jquery.com/siblings/