はじめに
クリックしたボタンに応じて表示が変わるタブメニューのコードを紹介します。
JabaScriptを学習し始めた方にもおすすめです！
コード
See the Pen JjbQqmp by Ryuji Watanabe (@ryuji0526) on CodePen.
ポイント
このタブメニューのポイントは、押したボタンと表示するアイテムとの連携です。
以下のように行います。
index.html
<!-- 10行目 --><ulclass="menu"><!--「data-」属性で、アイテムと同じid名を設定 --><li><ahref="#"data-id="menuId1">menu1</a></li><li><ahref="#"data-id="menuId2">menu2</a></li><li><ahref="#"data-id="menuId3">menu3</a></li></ul><sectionclass="content"id="menuId1">メニュー①です。
</section><sectionclass="content"id="menuId2">メニュー②です。
</section><sectionclass="content"id="menuId3">メニュー③です。
</section>
main.js
//22行目 //data-idの値と同じ値のidを持つ要素をdatasetプロパティで取得し、selectクラスを追加letcurrentMenu=document.getElementById(clickedItem.dataset.id)currentMenu.classList.add('select');JSのdatasetプロパティを通して、data属性で指定した値を取得することができます。
これによって、押したボタンと表示するアイテムとを連携させることができます！
おわりに
data属性はHTML要素に独自の追加情報を格納することができます！
JSと組み合わせることで、使い道が格段に増えると思うので、ぜひ使ってみてください！
