BLOGホームページ制作関係csshtmljavascript

javascriptでタブを自作しよう

2020/01/14

はじめに

jsでタブを自作することってできますかね?

もちろんjsでタブを作ることは可能です。動きとしては、クリックした際の表示と非表示の切り替えを行うといったものですね。

基本的な動作はそうですね。クリックしたタブに対応した内容が下に表示されるといったものです。

考え方としては、表示する用のクラスを付け替えていくといったものになります。サンプルでは、activeとしましょう。activeがついているものとついてないないものでcssを変えて行きましょうか。

わかりました。どうやってつくるのか詳細をお願いします。

ではサンプルと合わせてご紹介してきましょう。

jsでタブを作ってみよう

まず、タブを作るためのhtmlを用意しようかと思います。
今回はシンプルに次のような構造にしましょう。

<ul class="tab_test">
<li id="tab1" class="active">タブ1</li>
<li id="tab2">タブ2</li>
</ul>
<div class="tab_cnt">
<div id="tab1_cnt" class="active">タブ1のコンテンツです。</div>
<div id="tab2_cnt">タブ2のコンテンツです。</div>
</div>

上記のhtmlを実装したのが次の状態になります。

  • タブ1
  • タブ2
タブ1のコンテンツです。
タブ2のコンテンツです。

このままでは、タブの見た目には程遠いですし、タブ1のものはタブ1の内容、タブ2のものはタブ2の内容になっているべきですね。では、次にcssでちょっと見た目をいじって見ましょう。

ul.tab_test{
 margin:0;
}
.tab_test li{
 border:1px solid #888;
 border-bottom-color:transparent;
 list-style:none;
display:inline-block;
background:#888;
color:#fff;
}
.tab_test li.active{
 background:#fff;
color:#000;
}
.tab_cnt{
 border:1px solid #888;
padding:15px;
 margin-top:-1px;
 overflow:hidden;
}
.tab_cnt div{
 display:none;
}
.tab_cnt div.active{
 display:block;
}
  • タブ1
  • タブ2
タブ1のコンテンツです。
タブ2のコンテンツです。

cssで上記のようなデザインにして見ました。まずulのタブをdisplay:inline-block;で横に並べます。
また各タブの要素と内容にはactiveというクラスをつけて最初に表示されている内容とタブを設定します。
activeがついていないクラスについては、非表示にします。これで見た目としてタブの要素に近づきます。
またタブが上のulの要素とdivの内容が同じコンテンツであると見せるためにoverflowを使って下のdivの要素を上に移動させてタブと重なってる部分を消すことでよりタブらしく実装しましょう。
次に考えるべきは、このタブのところをクリックすることで、タブが実際に切り替わっていく動作を入れて行きましょう。
考え方は、タブを押した際、idを取得します。例えばid=”tab2”のタブをおします。この時tab2という情報をjs側で取得しましょう。取得したtab2という文字列を使いtab_cnt内のtab2_cntにidにactiveがつくようにして、activeが切り替わるようにしましょう。

<script>
$(function(){
 $('.tab_test li').on('click',function(){
   $('.tab_test li').removeClass("active");
   $(this).addClass("active");
   var id=$(this).attr('id');
   $('.tab_cnt div').removeClass("active");
   $('#'+id+'_cnt').addClass("active");
 });
});
</script>
  • タブ1
  • タブ2
タブ1のコンテンツです。
タブ2のコンテンツです。

これで上記のように、クリックされた際、まずactiveを全ての要素から削除し、クリックに対応したidにactiveが移動するようになります。考え方としては、非常にシンプルなのではないでしょうか?タブの作り方がわからない 考え方がわからないといった方の参考になれば幸いです。