Help us understand the problem. What is going on with this article?

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

JavaScript

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

タブ切り替え

今回メニュー三つは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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした