前提
現在webサイトのメニューを作っています。
各メニューのリンク先は別ページの予定(htmlファイル)です。
実現したいこと
メニュー部分は全ページ共通で、各メニュークリック時に該当箇所に色変更等のクラスを付与したいのですが、ページ遷移後もクラスの付与・削除の状態は維持してクリックした時だけページ遷移とともにJSの内容を反映したいです。
発生している問題・エラーメッセージ
メニューをクリックしても何も変化なしです。
該当のソースコード
HTML
<nav> <ul> <li><a href="" class="js_menu_select">ホーム</a></li> <li><a href="" class="js_menu_select">メニュー</a></li> <li><a href="" class="js_menu_select">店舗情報</a></li> <li><a href="" class="js_menu_select">特典について</a></li> <li><a href="" class="js_menu_select">お問合わせ</a></li> </ul> </nav>
CSS
.menu_selected { color: #23a05e; font-weight: bold; }
Javascript
const menuSelect = document.querySelectorAll('.js_menu_select'); for (let i = 0; i < menuSelect.length; i++) { menuSelect[i].addEventListener('click', () => { menuSelect.forEach(menuSelect => { menuSelect.classList.remove('menu_selected'); }); menuSelect[i].classList.add('menu_selected'); }); }
試したこと
- デベロッパーツールで確認したところ、エラー等はないようです。
- 別のサイトで見つけたサンプルコードをもとに作りましたが、スペルミス以外どこで間違ったかわからない状況です。
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー