目次
どのメニューにactiveクラスがついているかに応じて、表示するタブの内容を切り替える処理を完成させます。
- Idの紐付け
- data属性の利用
Idの紐付け
・前回まででコンテンツのactiveクラスを外して行きました。
・今までの内容について列挙しておきます。
・今回はそれぞれのactiveクラスに対応してコンテンツも表示させるようにしていきます。
・まずはHTMの方でコンテンツがどのメニューが紐付いているかわかるように識別子を付けていきます。
・識別子はid属性を使っていけばいいのでサイトの概要にはabout、サービス内容にはserviceのように識別ができるようにしていきます。
・次に、それに紐付いてメニューであるとわかるようにa要素にdate属性を付与していきます。
・カスタムデータ属性を使っていきますのでdate-idとしてあげて値をそれぞれ紐付けていきます。
・サイト概要の場合はdata-id=”about”というように紐付けておきましょう。
data属性の利用
・idを紐付けることができたので今度はJavaScriptの方でクリックしたらどうなるのかという部分をいじっていきましょう。
・ではまずコンテンツの要素を取得していきたいのでgetElementByIdでidの取得をしていきます。
・id名はクリックされたメニュー項目のdataset.idで取得が可能なので(clickedItem.dataset.id)と書いていきましょう。
後はクラスリストを使ってactiveクラスを追加していきましょう。
・こんな感じですね。
document.getElementById(clickedItem.dataset.id).classList.add(‘active’);
