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添加一个“active”类。然后当你点击li class =“two”时，它会从第一个div中删除“active”并将它放在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');  
});

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

1 个答案:

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