jsでタブを作ってみよう

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

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

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

このままでは、タブの見た目には程遠いですし、タブ１のものはタブ１の内容、タブ２のものはタブ２の内容になっているべきですね。では、次に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;
}

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

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