data-属性を有効活用！簡単・便利なタブメニュー

はじめに

クリックしたボタンに応じて表示が変わるタブメニューのコードを紹介します。
JabaScriptを学習し始めた方にもおすすめです！

コード

See the Pen JjbQqmp by Ryuji Watanabe (@ryuji0526) on CodePen.

ポイント

このタブメニューのポイントは、押したボタンと表示するアイテムとの連携です。
以下のように行います。

index.html

      <!--　10行目 -->
      <ul class="menu">
         <!--「data-」属性で、アイテムと同じid名を設定 -->
        <li><a href="#"  data-id="menuId1">menu1</a></li>
        <li><a href="#"  data-id="menuId2">menu2</a></li>
        <li><a href="#" data-id="menuId3">menu3</a></li>
      </ul>

      <section class="content" id="menuId1">
        メニュー①です。
      </section>
      <section class="content" id="menuId2">
        メニュー②です。
      </section>
      <section class="content" id="menuId3">
        メニュー③です。
      </section>

　

main.js

      //22行目
　　　 //data-idの値と同じ値のidを持つ要素をdatasetプロパティで取得し、selectクラスを追加
      let currentMenu = document.getElementById(clickedItem.dataset.id)
      currentMenu.classList.add('select');

JSのdatasetプロパティを通して、data属性で指定した値を取得することができます。
これによって、押したボタンと表示するアイテムとを連携させることができます！

おわりに

data属性はHTML要素に独自の追加情報を格納することができます！
JSと組み合わせることで、使い道が格段に増えると思うので、ぜひ使ってみてください！