liタグで作られたメニューのクリックした項目のみ色を変える
liタグで作られたメニュー(仮にリスト01)をクリックするとその項目のみ色が変わる
(その他の項目(仮にリスト02)をクリックするとリスト01の色が消えてリスト02に色がつく)
という処理をしたいと思っています。
該当のソースコード
【html】 <li class="active list01"><div>テキストテキスト</div</li> <li class="list02"><div>テキストテキスト</div</li> <li class="list03"><div>テキストテキスト</div</li> <li class="list04"><div>テキストテキスト</div</li> <li class="list05"><div>テキストテキスト</div</li> <li class="list06"><div>テキストテキスト</div</li> 【js】 $(document).ready(function(){ $('.list01').click(function () { /* 枠のON,OFF */ $('list01').addClass('active'); $('list02').removeClass('active'); $('list03').removeClass('active'); }); $('.list02').click(function () { /* 枠のON,OFF */ $('list01').removeClass('active'); $('list02').addClass('active'); $('list03').removeClass('active'); }); $('.list03').click(function () { /* 枠のON,OFF */ $('list01').removeClass('active'); $('list02').removeClass('active'); $('list03').addClass('active'); }); ・ ・ ・ 以下略
試したこと
当初は力技で上記ソースのように組んでいたのですが、
このリストは定期的に増えていくとのことで、上記のようなやり方は現実的でないと考えています。
今後リストが増えていった場合にも対応できるような記述があればぜひともご教示いただきたく存じます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/27 03:42
退会済みユーザー
2018/12/27 03:46