简单的jQuery当前选择功能？

Question

我有几个列表,当用户点击某个项目时,我希望它将类更改为当前,但是如果用户然后单击同一列表中的另一个项目将其切换为当前并从之前删除当前项目项目已选中.

任何快速的例子,我知道这可能已经存在但是找不到一个好的例子.

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

因此,如果单击项目1,它将是类当前,但如果单击项目2则关闭.

Answer 1

$('ul#list li').click(function(){
   $(this).addClass('current').siblings().removeClass('current');
});

引用

• addClass
• 兄弟姐妹
• removeClass

简单的演示

如果你因为兄弟姐妹使用li添加/删除它会很容易current.但如果你不想使用锚,就这样做,

$('ul#list li a').click(function(){
   var li = $(this).parent();
   li.find('a').addClass('current');
   li.siblings().find('a').removeClass('current');
   return false;
});

或者如果你只是想用锚只为click事件,仍然添加/删除current上li,做到这一点,

$('ul#list li a').click(function(){
   var li = $(this).parent();
   li.addClass('current').siblings().removeClass('current');
   return false;
});