メニューの各要素を取得して、クリックしたところにクラスを付与し、それ以外はクラスを削除する

前提

現在webサイトのメニューを作っています。

ヘディングのテキストヘディングのテキスト実現したいこと

各メニューをクリックした時に該当箇所に色変更等のクラスを付与したいです。

発生している問題・エラーメッセージ

メニューをクリックしても何も変化なしです。

該当のソースコード

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/ツールのバージョンなど）