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

Question

I have the following 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>

Here's what I want to do: when you click on the li class="one", I want to add an "active" class to all divs with class="one". Then when you click on li class="two", it removes the "active" from the first div and puts it on div class="two". I've played around with a few different ways of doing this, but I'm having trouble coming up with an efficient way to do it for all lis and divs (there will eventually be 10 of them).

Answer 1

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

Demo: http://jsfiddle.net/9RLa9/

Alternatively, if you want to use the parent class instead of the text of the link to trigger your changes:

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