ネイティブJavaScriptでタブを作ろう

こんにちは、中村です。
今回はjQueryなどを使わないネイティブJavaScriptでのタブの作り方をご紹介します。

デモ

See the Pen ネイティブJavaScriptでタブを作ろう by Nakamura (@takayo-nakamura) on CodePen.

動作の解説

（1）タブメニューをクリックされたら、クリックされたメニューのaタグのhref属性の値を取得します。

    const link = e.currentTarget;
    const id = link.hash.slice(1); //タブメニューのaタグのhrefを取得
    const target = document.getElementById(id);

（2）メニューとコンテンツのタグについているカレント用のクラスis-activeを探し、全て外します。

    const activeItems = link.parentNode.parentNode.parentNode.querySelectorAll('.is-active');
    Array.prototype.forEach.call(activeItems, activeItem => {
      activeItem.classList.remove('is-active');
    });

（3）（1）で取得したidのコンテンツとメニューにクラスis-activeを付与します。

   <!-- メニュー  -->
   <li class="tab_nav_item is-active"><a href="#content1" class="js-tab-nav">メニュー1</a></li>

   <!-- コンテンツ  -->
    <div id="content1" class="tab_content is-active">
       <p>コンテンツ1</p>
    </div>

      link_parent.classList.add('is-active');//メニューにクラスを付与する
      target.classList.add('is-active');//コンテンツにクラスを付与する

※クラスis-activeは初期に表示したいものに予め記述しておきます。

point! 同じページ内に複数設置できるようにする

同じページ内で複数設置したいこともあるので、querySelectorAllで取得した.js-tab全てにforEachでイベントを当てています。
タブメニューとコンテンツはidで紐づけるので他のタブと重複しないようにします。

    const tabs = document.querySelectorAll('.js-tab');
    Array.prototype.forEach.call(tabs, tab => {
         //処理
    });

まとめ

やっていることはカレント用クラスを付け替えるだけの単純な動作です。
jQueryを使うと要素にイベントを当てるのが簡単ですが、ネイティブのJavaScriptではpoint!で書いたような書き方が必要なので少し手間がかかります。
JavaScriptを簡単にしたいのもあって表示・非表示はCSSで変えていますが、今度は全てjsで書いてみようと思います。