【JavaScript】タブメニューを作ってみる

こんにちは！セミマサです。

タブをクリックすると内容が切り替わるいわゆるタブメニューを作ってみたので作り方をまとめておきます！今回はjQueryを使わずJavaScriptで書いてみました。

デモサイト
HTML
CSS
JavaScript
おわりに

デモサイト

今回のデモサイトになります。

HTML

<section>
    <div class="main-area">
        <div class="tab">
            <p class="tab-menu is-active">タブ1</p>
            <p class="tab-menu">タブ2</p>
            <p class="tab-menu">タブ3</p>
        </div>
        <div class="content-box is-active">
            <p class="content">タブ1の中身です</p>
        </div>
        <div class="content-box">
            <p class="content">タブ2の中身です</p>
        </div>
        <div class="content-box">
            <p class="content">タブ3の中身です</p>
        </div>
    </div>
</section>

タブメニュー部分のHTMLです。複数あるtab-menuとcontent-boxのうち、is-activeクラスをつけたものが最初に表示されます。

CSS

.main-area{
  padding: 20px 2%;
  background-color: gainsboro;
}
.tab{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.tab-menu{
  width: 33.333%;
  text-align: center;
  padding: 8px;
  color:#ccc;
  border-radius:8px;
  background-color: #fff;
  cursor: pointer;
}
.tab-menu.is-active{
  background-color: paleturquoise;
  color:black;
}
.content-box{
  display: none;
  height: 60vh;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}
.content-box.is-active{
  display: flex;
}
.content{
  font-size: 1.5rem;
}

タブメニュー部分のCSSになります。

・タブはフレックスボックスで横並びにし、選択されたものは背景色と文字色を変えています。

・コンテンツボックスはアクティブなもののみ表示します。

JavaScript

<script>
    const tab_list = document.querySelectorAll('.tab-menu');
    const content_box_list = document.querySelectorAll('.content-box');
    for(let i = 0;i < tab_list.length;i++){
        tab_list[i].addEventListener('click', tab_check,false);
    }
    function tab_check(e){
        let num;
        if(!e.target.classList.contains('is-active')){
            for(let i = 0; i < tab_list.length;i++){
                if(tab_list[i].classList.contains('is-active')){
                    tab_list[i].classList.remove('is-active');
                }
            }
            e.target.classList.add('is-active');
            for(let i = 0; i < tab_list.length;i++){
                if(tab_list[i].classList.contains('is-active')){
                    num = i;
                }
            }
            content_check(num);
            }
    }
    function content_check(number){
        for(let i = 0; i < content_box_list.length;i++){
            if(content_box_list[i].classList.contains('is-active')){
                content_box_list[i].classList.remove('is-active'); 
            } 
        }
        content_box_list[number].classList.add('is-active');
    }
</script>

今回のJavaScriptです。上から順に解説していきます！

・最初にquerySelectorAllを使ってtab-menuクラスのリストをtab_listへ、content-boxクラスのリストをcontent_box_listへ格納しています。

・その次のfor文でtab_list内の各要素(タブ)にクリックイベントを追加しています。クリックされた場合tab_check関数が呼び出されます。

・tab_check関数についてです。

①：クリックされたタブがアクティブではない場合処理が続行します。

②：for文を回してtab_list内の各要素からis-activeクラスを取り除きます。

③：クリックされたタブをアクティブにします。

④：for文を回して現在アクティブになっているのが何番目のタブなのか調べます。

⑤：content_check関数に④で取得した番号を渡します。

・content_check関数についてです。

①：for文を回してcontent_box_list内の各要素からis-activeクラスを取り除きます。

②：tab_check関数から渡された番号に対応したコンテンツボックスをアクティブにします。