javascriptタブの切り替え ザッと復習

JavaScript

カリキュラムの復習。タブの切り替えです。
これから使いそうなのでまとめてみました。

タブ切り替え

今回メニュー三つはmenu_itemクラス、クリックされた時にactiveクラスを付与
メニュー下の内容はcontentクラスに、クリックされた時にshowクラスを付与して切り替えます。

まずノードを取得し、配列に変換する

main.js

let tabs = document.getElementsByClassName("menu_item");
  // tabsを配列に変換する
  tabsAry = Array.prototype.slice.call(tabs);

Array.prototype.slice.call()

これで引数にとったオブジェクトを配列に変換してくれます。
menu_item三つがtabsAryに入ります。

activeクラスの切り替え

関数を作ります（今回はtabSwitch）

main.js

// クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    document.getElementsByClassName("active")[0].classList.remove("active");

    // クリックしたタブにactiveクラスを追加
    this.classList.add("active");

ノード取得しclassList.removeでactiveクラスの削除
this.classList.addでクリックした所にactiveクラスの追加

showクラスの切り替え

menu_itemと違いclickされずに変更するためactiveクラスとは違う方法が必要

main.js

// コンテンツの全てのshowクラスのうち、最初の要素を削除
    document.getElementsByClassName("show")[0].classList.remove("show");

 // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabsAry.indexOf(this);

    // クリックしたcontentクラスにshowクラスを追加する
    document.getElementsByClassName("content")[index].classList.add("show");
  }

indexOf()

inexOf()は配列に対してだけ使い、DOMを引数にとって一致した要素番号を戻します。
これでクリックされて付与するactiveクラスと同じ番号を取得できます。
その番号にclassList.addでshowクラスを追加します。

tabSwitchの呼び出し

これでtabsAryに入ったmain_item（value）がクリックされた時にtabswitch関数を呼び出せます。

main.js

 // タブメニューの中でクリックイベントが発生した場所を探し、下で定義したtabSwitch関数を呼び出す
  tabsAry.forEach(function(value) {
    value.addEventListener("click", tabSwitch);
  });

以上復習になりました。
forEach文については多くの使い方があるので、わかりやすかったsamuraiblogさんの参考サイト載せておきます。
https://www.sejuku.net/blog/20257

間違えているところあったら申し訳ございません。
ありがとうございました！！