【コピペでOK】簡単に実装できる汎用性の高いタブ切り替え

webデザイン , コード , タブ切り替え ,

2020/09/13

今回は選択中の項目のみを表示するタブ切り替えのコードを紹介します。
選択中の項目に合わせて表示する内容を切り返す機能となっており、使用する機会は多いと思います。

コピペで使用可能となっていますが、ご自身で項目の増減などカスタマイズを行う場合は解説を参考にしてください。

デモ

タブをクリックすることで表示される内容が変更されます。

tab01
tab02
tab03
tab04

ここにtab01の内容を記述します。

ここにtab02の内容を記述します。

ここにtab03の内容を記述します。

ここにtab04の内容を記述します。

コードの紹介

html、css、jsと順に紹介していきます。
ディレクトリ構成については割愛しますのでHTMLファイルにcssファイルとjsファイルを読み込ませておいてください。

HTML

ではまずHTMLから。
前提としてjQueryを使用しているので読み込み、または設置が必要となります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/script.js"></script>

<div class="tab">
    <ul class="tab__wrap">
        <li class="tab__select js-tabSelect tab__selected">tab01</li>
        <li class="tab__select js-tabSelect">tab02</li>
        <li class="tab__select js-tabSelect">tab03</li>
        <li class="tab__select js-tabSelect">tab04</li>
    </ul>
    <div class="tab__contents js-tabContents tab__active">
        <p>ここにtab01の内容を記述します。</p>
    </div>
    <div class="tab__contents js-tabContents">
        <p>ここにtab02の内容を記述します。</p>
    </div>
    <div class="tab__contents js-tabContents">
        <p>ここにtab03の内容を記述します。</p>
    </div>
    <div class="tab__contents js-tabContents">
        <p>ここにtab04の内容を記述します。</p>
    </div>
</div>

</ul>

<p>ここにtab01の内容を記述します。</p>

</div>

<p>ここにtab02の内容を記述します。</p>

</div>

<p>ここにtab03の内容を記述します。</p>

</div>

<p>ここにtab04の内容を記述します。</p>

</div>

css

タブのスタイルを指定しておいてdisplay:none;で非表示にしておきます。

このままだと全て非表示になってしまい、タブをクリックするまで中身が表示されません。なのであらかじめ表示しておく要素にクラスtab__activeを付与してきます。

これで最初の項目のみ表示、それ以外は非表示の状態にできます。
後はjsで表示の切り替えを実装します。

.tab {
}

.tab__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.tab__select {
  list-style: none;
  padding: 10px;
  cursor: pointer;
  -webkit-transition: all ease-out 0.2s;
  transition: all ease-out 0.2s;
}

.tab__contents {
  display: none;
  padding: 10px;
  width: 600px;
  height: 200px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #efefef;
  -webkit-transition: all ease-out 0.2s;
  transition: all ease-out 0.2s;
}

.tab__active {
  display: block;
}

.tab__selected {
  background-color: #efefef;
}

.tab {

}

.tab__wrap {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

.tab__select {

list-style: none;

padding: 10px;

cursor: pointer;

-webkit-transition: all ease-out 0.2s;

transition: all ease-out 0.2s;

}

.tab__contents {

display: none;

padding: 10px;

width: 600px;

height: 200px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

background-color: #efefef;

-webkit-transition: all ease-out 0.2s;

transition: all ease-out 0.2s;

}

.tab__active {

display: block;

}

.tab__selected {

background-color: #efefef;

}

js

表示切り替え用のjsです。
行っている動作はクラスの着脱のみで、それに設定されたcssを適用しているだけです。

$(function(){
    $('.js-tabSelect').on('click',function(){
        var select = $('.js-tabSelect');
        var tab = $('.js-tabContents');
        var tabNum = $(this).index();
        select.removeClass('tab__selected');
        select.eq(tabNum).addClass('tab__selected');
        tab.removeClass('tab__active');
        tab.eq(tabNum).addClass('tab__active');
    });
});

$(function(){

$('.js-tabSelect').on('click',function(){

var select = $('.js-tabSelect');

var tab = $('.js-tabContents');

var tabNum = $(this).index();

select.removeClass('tab__selected');

select.eq(tabNum).addClass('tab__selected');

tab.removeClass('tab__active');

tab.eq(tabNum).addClass('tab__active');

});

コードと仕組みの解説

表示切替の仕組みはシンプルでtab__selectedというクラスの着脱です。

着脱の仕組みはjQueryを利用しており、クラスtab__active付与時はdisplay:block;のスタイルが適用され表示されます。逆にクラスが付与されていない場合はdisplay:none;が適用され非表示になります。

このコードでの利点は要素の増減に合わせてjsのコードを編集する必要がないことです。タブの数と中身の要素さえ数が一致しておけば問題なく動作します。

htmlとcssで要素数やデザインの変更が容易ですので用途に合わせてカスタマイズしていただければと思います。