【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>

</div>

<p class="content">タブ1の中身です</p>

</div>

<p class="content">タブ2の中身です</p>

</div>

<p class="content">タブ3の中身です</p>

</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;
}

.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>