Haga clic en un artículo, agregue y elimine clases de otros artículos

Question

Tengo el siguiente 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>

Esto es lo que quiero hacer: cuando haces clic en Li Class="One", quiero agregar una clase "activa" a todos los divs con clase="uno".Luego, cuando hace clic en Li Class="Dos", elimina el "Activo" desde el primer div y lo pone en DIV Class="Dos".He jugado con algunas formas diferentes de hacer esto, pero tengo problemas para encontrar una manera eficiente de hacerlo por todas las LIS y DIV (eventualmente serán 10 de ellos).

Answer 1

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

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

Alternativamente, si desea utilizar la clase principal en lugar del texto del enlace para activar sus cambios:

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