javascript
1コード/** 2 * selectorに該当するタブを表示する 3 */ 4const showTab = (selector) => { 5 // 引数selectorの中身をコンソールで確認する 6 console.log(selector); 7 8 // いったん(ひとまず)、すべての.tabs-menu liからactiveクラスを削除する 9 $('.tabs-menu li').removeClass('active'); 10 // .tabs-menu liのうち、selectorに該当するものにだけactiveクラスを付ける 11 $(`.tabs-menu a[href="${selector}"]`) 12 .parent('li') 13 .addClass('active'); 14 15 // いったん、すべての.tabs-content > sectionを非表示にする 16 $('.tabs-content > section').hide(); 17 // .tabs-content > sectionのうち、selectorに該当するものだけを表示する 18 $(selector).show(); 19}; 20 21// タブがクリックされたらコンテンツを表示 22$('.tabs-menu a').on('click', (e) => { 23 // hrefへのページ遷移とを止める 24 e.preventDefault(); 25 26 // hrefの値を受け取ってshowTab()関数に渡す。e.targetはクリックされたタブ(.tabs-menu a)を表す 27 const selector = $(e.target).attr('href'); 28 showTab(selector); 29}); 30 31// 初期状態として1番目のタブを表示 32showTab('#tabs-1');
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
なぜわざわざactiveクラスを削除するのか分からない
エラーメッセージ
該当のソースコード
javascript
1ソースコード // いったん(ひとまず)、すべての.tabs-menu liからactiveクラスを削除する 2 $('.tabs-menu li').removeClass('active'); 3 // .tabs-menu liのうち、selectorに該当するものにだけactiveクラスを付ける 4 $(`.tabs-menu a[href="${selector}"]`) 5 .parent('li') 6 .addClass('active'); 7
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
自分が書いた質問をよく読んでください
出典も何も書いていないので「自分が書いたコードを他人に説明させようとしている」形になっています。