jQueryを使わず、純粋なJavaScriptのみでクラスの追加・削除を行いたいです。
追加すること、もう一度同じ要素をクリックすることでクラスの追加・削除を行うことはできるのですが、
「クリックした要素以外にクラスが付いていた場合、そのクラスを削除する」方法がわかりません。
HTML
1<div id="top-tabmenu-list"> 2 <ul> 3 <li class="top-tabmenu-item"><label for="tab-1">AAA</label></li> 4 <li class="top-tabmenu-item"><label for="tab-2"></i>BBB</label></li> 5 <li class="top-tabmenu-item"><label for="tab-3">CCC</label></li> 6 <li class="top-tabmenu-item"><label for="tab-4">DDD</label></li> 7 <li class="top-tabmenu-item"><label for="tab-5">EEE</label></li> 8 </ul> 9</div>
JavaScript
1function tabBar_animation(){ 2 var tabBar = document.querySelectorAll('#top-tabmenu-list li'); 3 for (var i = 0; i < tabBar.length; i++){ 4 tabBar[i].addEventListener("click", function(){ 5 this.classList.toggle('tab_link'); 6 }); 7 } 8 9} 10tabBar_animation();
追記情報
JavaScript
1function tabBar_animation(){ 2 var tabBar = document.querySelectorAll('#top-tabmenu-list li'); 3 for (var i = 0; i < tabBar.length; i++){ 4 tabBar[i].addEventListener("click", function(){ 5 var tabLink = document.querySelectorAll('.tab_link').length; 6 this.classList.toggle('tab_link'); 7 if ( tabLink > 1 ){ 8 this.classList.remove('tab_link'); 9 } 10 }); 11 } 12} 13tabBar_animation();
要件が明確でないため、jQuery のコードがあるなら一緒に提示したほうがいいでしょう。
回答4件
あなたの回答
tips
プレビュー