[jquery]切り替えタブを作ってみよう

今回はよく使われるタブを作ってみようと思います。

一々、コンテンツ縦にいっぱい並べて表示させるって大変ですよね。タブを作ってコンテンツを切り替えられたら一番いいですよね。今回はそんなタブを作って見ます。考え方は、押したボタンに対応するコンテンツをcssで表示させます。押されていないものは、cssで非表示にすると行ったものになります。つまり表示非表示をjqueryでクラスを入れ替えていくと行った考え方になります。

HTMLとCSSを用意して、タブをデザインしてみよう

htmlとcssを使ってタブをデザインしてみようと思います。

タブは、ボタンがあってそれに対応したコンテンツを表示するといったものです。つまりタブの部分とコンテンツの部分を作る必要があります。

今回はサンプルとして３つのタブを切り替えるものを作ろうと思います。

タブ部分にactiveとついている場合は表示されて、ついていない場合は非表示にするといったhtmlとcssを記述してみようと思います。

まずは、非表示にしてない状態を作ろうと思います。

<style>
 .sample_tab{
    font-size:0;
    padding:0;
   margin-bottom:0;
 }
 .sample_tab li{
   font-size:16px;
   text-align:center;
   display:inline-block;
   width:30%;
   border-top:1px solid #ccc;
   border-left:1px solid #ccc;
   border-right:1px solid #ccc;
   margin-right:1%;
   background:#fff;
   overflow:hidden;
   z-index:1;
 }
 .sample_tab_content{
   width:100%;
   padding:30px;
   border:1px solid #ccc;
   margin-top:-1px;
   margin-bottom:30px;
 }
</style>
<ul class="sample_tab">
 <li id="sample_tab1">tab1</li>
 <li id="sample_tab2">tab2</li>
 <li id="sample_tab3">tab3</li>
</ul>
<div class="sample_tab_content">
 <div id="sample_tab1_content">
   <p>サンプルtab１のコンテンツの中身なります。</p>
　　<p>jqueryを使ってタブの切り替えを行っております。</p>
　　<p>tab1に切り替わりました。</p>
　　<p>htmlとcssでタブのようにデザインします。</p>
 </div>
 <div id="sample_tab2_content">
    <p>サンプルtab2のコンテンツの中身なります。</p>
　　<p>jqueryを使ってタブの切り替えを行っております。</p>
　　<p>tab2に切り替わりました。</p>
　　<p>htmlとcssでタブのようにデザインします。</p>
 </div>
  <div id="sample_tab3_content">
    <p>サンプルtab3のコンテンツの中身なります。</p>
　　<p>jqueryを使ってタブの切り替えを行っております。</p>
　　<p>tab3に切り替わりました。</p>
　　<p>htmlとcssでタブのようにデザインします。</p>
 </div>
</div>

切り替え状態がなく全てのコンテンツが表示されている状態

• tab1
• tab2
• tab3

上記のようにタブのようなものでコンテンツが全部並んでる状態を作りました。
タブがめり込んでいるのはmargin-topをマイナスをとって重なった部分をoverflowで消しています。背景の色を白でも設定することでborderを見えなくすることができます。

次は上記のコードにactiveと非アクティブのものを用意して１つ目のタブが選択されているような状態にしましょう。

<style>
 .sample_tab{
    font-size:0;
    padding:0;
   margin-bottom:0;
 }
 .sample_tab li{
   font-size:16px;
   text-align:center;
   display:inline-block;
   width:30%;
   border-top:1px solid #ccc;
   border-left:1px solid #ccc;
   border-right:1px solid #ccc;
   margin-right:1%;
   background:#ccc;
   overflow:hidden;
   z-index:1;
 }
.sample_tab li.active{
  background:#fff;
}
 .sample_tab_content{
   width:100%;
   padding:30px;
   border:1px solid #ccc;
   margin-top:-1px;
   margin-bottom:30px;
   box-sizing:border-box;
 }
.sample_tab_content > div{
  display:none;
}
.sample_tab_content .active{
   display:block;
}
</style>
<ul class="sample_tab">
 <li id="sample_tab1" class="active">tab1</li>
 <li id="sample_tab2">tab2</li>
 <li id="sample_tab3">tab3</li>
</ul>
<div class="sample_tab_content">
 <div id="sample_tab1_content" class="active">
   <p>サンプルtab１のコンテンツの中身なります。</p>
　　<p>jqueryを使ってタブの切り替えを行っております。</p>
　　<p>tab1に切り替わりました。</p>
　　<p>htmlとcssでタブのようにデザインします。</p>
 </div>
 <div id="sample_tab2_content">
    <p>サンプルtab2のコンテンツの中身なります。</p>
　　<p>jqueryを使ってタブの切り替えを行っております。</p>
　　<p>tab2に切り替わりました。</p>
　　<p>htmlとcssでタブのようにデザインします。</p>
 </div>
  <div id="sample_tab3_content">
    <p>サンプルtab3のコンテンツの中身なります。</p>
　　<p>jqueryを使ってタブの切り替えを行っております。</p>
　　<p>tab3に切り替わりました。</p>
　　<p>htmlとcssでタブのようにデザインします。</p>
 </div>
</div>

見た目だけタブにした状態

• tab1
• tab2
• tab3

上記のようにactiveがついていないタブは背景の色を切り替えて、activeがついていないコンテンツの内容はdisplay:noneで非表示にして見た目をタブにしたものとなります。下記で次は、このactiveというクラスを切り替えることでタブとして動作させてみようと思います。

jqueryでクラスを切り替えてタブとして機能させてみよう

上記の見た目だけのタブを切り替えてみようと思います。

今回はhtmlの構造として、クリックしたタブのidはsample_tab1、sample_tab2などtabの後ろに数字をつけています。また、コンテンツ側は、sample_tab1_content、sample_tab2_contentなどタブの対応として後ろに _contentをつけた構造になっています。つまり、タブ側の処理は、タブがクリックされた時、タブの全てからactiveのクラスを取り除き、クリックされたものだけactiveをつけるといった動作をすればタブのデザインが切り替わるといった仕掛けになります。またこの考えから、タブのidを取得することで、コンテンツ側のものを一旦全てactiveクラスを消してしまい、タグのidに対応したコンテンツブロックのidを文字結合で作り出し、そこにactiveのクラスを付与してあげることで、コンテンツブロックが切り替わるといった仕掛けになります。

jqueryのサンプルとサンプルの実装例は次のようになります。

<script>
 $(function(){
   $('.sample_tab > li').on('click',function(){
      $('.sample_tab > li').removeClass('active');
      $('.sample_tab_content > div').removeClass('active');
      $(this).addClass('active');
      var id=$(this).attr('id');
　　　 var target='#'+id + '_content';
      $(target).addClass('active');
   });
 });
</script>

jqueryを使うことでタブとして動作させて見た

• tab1
• tab2
• tab3

上記のようにcssのデザインを上手にクラスを入れ替えて作ることでタブのようなものが作ることができます。

まとめ

今回は、jqueryを使ってタブを作って見ました。考え方は全て表示させているものをまずは作り、一つしか見かけ上表示させないようにする。その後jqueryを使って表示するクラスとデフォルトの非表示のクラスを切り替えることでタブのようなものを実現するといった方法で作らせていただきました。tab側のidとcontents側のidをうまく連動させることで実現可能ですね。これからタブを作って見たいといった方のお力になれれば幸いです。