jqueryで6個タブを持つタブメニューを作ろうとしています。
index.html
<div class="tab-menu">
<ul>
<li id="one" class="selected">月曜日</li>
<li id="two">火曜日</li>
<li id="three" >水曜日</li>
<li id="four">木曜日</li>
<li id="five">金曜日</li>
<li id="six">土曜日</li>
</ul>
<div class="contets_list">
<div class="one">
<p>アイウエオ</p>
</div>
<div class="two">
<p>アイウエオ</p>
</div>
<div class="three">
<p>アイウエオ</p>
</div>
<div class="four">
<p>アイウエオ</p>
</div>
<div class="five">
<P>アイウエオ</P>
</div>
<div class="six">
<P>アイウエオ</P>
</div>
</div>
</div>
test.js
function tab_menu_button() {
function tab_menu() {
$("li.selected").removeClass("selectd");
$(this).addClass("selected")
}
$("li").on("click", tab_menu);
}
window.addEventListener("load",tab_menu_button);
この書き方ではタブを押してもselectedにかけたcssがタブを押していくたびに全てにかかってしまい全てselected
で指定した色になってしまい一つにだけにかかりません。どうすればいいですか?