当前位置 : 主页 > 网页制作 > JQuery >

简单的jQuery当前选择功能?

来源:互联网 收集:自由互联 发布时间:2021-06-15
我有几个列表,当用户点击某个项目时,我希望它将类更改为当前,但是如果用户然后单击同一列表中的另一个项目将其切换为当前并从之前删除当前项目项目已选中. 任何快速的例子,我知
我有几个列表,当用户点击某个项目时,我希望它将类更改为当前,但是如果用户然后单击同一列表中的另一个项目将其切换为当前并从之前删除当前项目项目已选中.

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

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

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

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

引用

> addClass
> siblings
> removeClass

simple demo

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

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

或者如果您只是想为click事件使用锚点并仍然在li上添加/删除当前,请执行此操作,

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