单击一个项目，从其他项目添加和删除类

click on one item, add and remove classes from other items

本文关键字：项目 添加 其他 删除 一个 单击      更新时间：2023-09-26

我有以下 HTML：

<ul>
   <li class="one"><a href="#">one</a></li>
   <li class="two"><a href="#">two</a></li>
   <li class="three"><a href="#">three</a></li>
</ul>
<div class="one">
   Here's div one
</div>
<div class="two">
   Here's div two
</div>
<div class="three">
   Here's div three
</div>
<div class="one">
   Here's another div one, just for kicks
</div>

这就是我想做的：当你点击 li class="one" 时，我想用 class="one" 向所有div 添加一个"活动"类。 然后，当您单击 li class="two" 时，它会从第一个div 中删除"active"并将其放在div class="two" 上。 我已经尝试了几种不同的方法来做到这一点，但是我很难想出一种有效的方法来为所有lis和div做到这一点(最终会有10个(。

$('ul a').on('click',function(){
  $('.active').removeClass('active');
  $('div.'+$(this).text()).addClass('active');  
});

演示：http://jsfiddle.net/9RLa9/

或者，如果要使用父类而不是链接的文本来触发更改：

$('ul li').on('click',function(){
  $('.active').removeClass('active');
  $('div.'+$(this).attr('class')).addClass('active');  
});
相关文章：