2

私は次の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 個になる予定です) に対して効率的な方法を見つけるのに苦労しています。

4

1 に答える 1

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');  
});
于 2012-05-18T23:00:44.983 に答える