JavaScriptでcssを切り替えたいです。

Question

JavaScriptでcssを切り替えたいです。

.toggleClassでは、クリックしたらそのクラスを当てますが、
ほかのliをクリックした際に、そのクリックしたliに.onの
クラスを当てたいです。
交互に切り替わるラジオボタンのような動きです。

簡単かと思われますが、初心者の為わかりません。
どうぞよろしくお願い致します。

$("li").click(function(){
  $(this).toggleClass("on");
});

li.on {	 background:#004DB3;	 }


<ul>
<li><a href="#01">メニュー#01</a></li>
<li><a href="#02">メニュー#02</a></li>
<li><a href="#03">メニュー#03</a></li>
<li><a href="#04">メニュー#04</a></li>
</ul>

Answer 1

onのついた自分自身を再度クリックしたときにonを外すかどうかですね
（修正しました）

外さなくていい(radio風)ならこう

$(function(){
  $('li').click(function(){
    $(this).siblings().removeClass('on');
    $(this).addClass('on');
  });
});

外すならこう

$(function(){
  $('li').click(function(){
    $(this).siblings().removeClass('on');
    $(this).toggleClass('on');
  });
});

Comments

[yambejp]

siblingsの方が直感的なので一部修正しました

[fnwakc]

外すならこう でできました！
ありがとうございます。

[fnwakc]

どちらとも参考にさせて頂きます。