タブで表示切替

コード例 - Sample

HTML

▶タブ部分とコンテンツ部分で同じ番号を割り当てておく
「data-tab-num="1"」＝「id="tab1"」のような感じ ▶初期値には「active」のclass名を付けておく ▶タブのブロック、コンテンツのブロックにはそれぞれ同じclass名を付けておく（clickイベントをまとめて設定するため）

<div class="example">
 <!--タブ部分-->
 <ul class="tab">
  <li class="tab-click active" data-tab-num="1">タブ1</li> <!--初期選択部にはclass「active」をつけておく-->
  <li class="tab-click" data-tab-num="2">タブ2</li>
  <li class="tab-click" data-tab-num="3">タブ3</li>
  <li class="tab-click" data-tab-num="4">タブ4</li>
  <li class="tab-click" data-tab-num="5">タブ5</li>
 </ul>
 <!--コンテンツ部分-->
 <div class="content">
  <div class="wrap">
   <div class="block tab-content active" id="tab1"> <!--初期選択部にはclass「active」をつけておく-->
    <p>タブ１の内容を表示</p>
   </div>
   <div class="block tab-content" id="tab2">
    <p>タブ２の内容を表示<br>テキストテキストテキストテキストテキストテキスト</p>
   </div>
   <div class="block tab-content" id="tab3">
    <p>タブ３の内容を表示</p>
   </div>
   <div class="block tab-content" id="tab4">
    <p>タブ４の内容を表示</p>
   </div>
   <div class="block tab-content" id="tab5">
    <p>タブ５の内容を表示</p>
   </div>
  </div>
 </div>
</div>

CSS

.example>.tab{
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
}
.example>.tab>li{
 background-color: #079add;
 color: #fff;
 margin: 0 5px;
 padding: 0 15px;
 border-radius: 5px 5px 0 0;
 cursor: pointer;
}
.example>.tab>li.active{ /*「active」の時だけ適用*/
 opacity:0.5;
 cursor: default;
}
.example>.tab>li:hover{
 opacity:0.5;
}
.example>.content>.wrap{
 border: 1px solid #079add;
 padding: 10px;
 min-height: 10rem;
}
.example>.content>.wrap>.block{
 display: none;
 opacity: 0;
}
.example>.content>.wrap>.active{ /*「active」の時だけ適用*/
 display: block;
 opacity: 1;
}

JavaScript

<script>
//タブの切り替え
let e1 = document.getElementsByClassName('tab-click');
for(let i = 0; i < e1.length; i++){
 e1[i].addEventListener('click', function(){
  tabChange(this.dataset.tabNum); //タブの「data-tab-num」に設定された番号を関数の引数に渡す
 });
}

function tabChange(n){
 //タブのactive表示切り替え
 let e1 = document.getElementsByClassName('tab-click'); //タブを同じclass名でまとめて取得
 for(let i = 0; i < e1.length; i++){
  //クリックしたタブとそれ以外を判定
  if(e1[i].dataset.tabNum == n){
   e1[i].classList.add('active'); //クリックしたタブの場合は「active」classを追加
  }else{
   e1[i].classList.remove('active'); //クリックしたタブ以外の場合は「active」classを削除
  }
 }

 //コンテンツのactive表示切り替え
 let e2 = document.getElementsByClassName('tab-content'); //コンテンツを同じclass名でまとめて取得
 for(let i = 0; i < e2.length; i++){
  //コンテンツに付与されたidとクリックしたタブの番号「tab(n)」を比較して判定
  if(e2[i].id == ('tab'+ n)){
   e2[i].classList.add('active'); //合致した場合は「active」classを追加
  }else{
   e2[i].classList.remove('active'); //合致しなかった場合は「active」classを削除
  }
 }
}
</script>