javascript - 单击一项，在其他项中添加和删除类

Question

我有以下 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 中删除“活动”并将其放在 div class="two" 上。我已经尝试了几种不同的方法，但是我很难想出一种有效的方法来为所有的 lis 和 div 做这件事（最终会有 10 个）。

Answer 1

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