simple demo

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

引用

simple demo

如果您使用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;
});

或者如果您只是想为点击事件使用锚点，仍然在current上添加/删除li，请执行此操作，

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

简单的jQuery当前选择功能？

1 个答案:

simple demo