JavaScriptでメニューにイベントをつけていく

メニューのliにclickイベントを設定して、クリックされたらactiveクラスが追加されるようにしていきます。

• イベントの設定
• ページ遷移のキャンセル

イベントの設定

・前回まででCSSでの全体的なスタイリングをやってきました。

・今回はJavaScriptでイベント設定していきます。

・どのようにしていくかと言うとメニューをクリックしたときに該当するコンテンツに先日作ったactiveクラスをつけていけばいいでしょう。

・ではコードを書いていきます。mine.jsにJavaScriptのコードを書いていきましょう。

・まずは厳密なエラーチェックができるように’use strict’;と先頭に書いていき、書いていくコードをブロックで囲っていきます{}と書いてその中にコードを書いていきます。

・まずメニュー項目を取得していきたいのでdocument.querySelectorAll('.menu li a’);を取得していきます。

・このとき定数にしたいのでconstを使いましょう。名前は適当にmenuItemsとしていきます。

・全体像としてはこんな感じです

const menuItems = document.querySelectorAll('.menu li a');

ページ遷移のキャンセル

・これでメニューを取得し取得したメニューはmenuItemsに格納できました。

・次は一つ一つ要素に対してイベントを設定していきたいのでforEach()を使って行きますそれぞれの要素の名前はitemとしておきましょう。

・addEventListenerを使ってそれぞれの要素にクリックしたらと書いていきます。item.addEventListener('click', e => {と書いていけばいいですね。

・このときa要素はリンク先に遷移する等動作があるのでそれをキャンセルするためにイベントオブジェクトを渡してe.preventDefault();を読んであげる必要があります。

・こんなふうに書いていきましょう。

menuItems.forEach(item => {

    item.addEventListener('click', e => {

      e.preventDefault();

・詳しくはこちらの記事を見てみてください

・次にクリックしたらされる処理を書いて行きます。

・activeクラスを追加していきたいのでclasslistを使って行きます。

・こんな感じですね。

 item.classList.add('active');