タブの切り替えもデザインやマークアップをしていてよく遭遇しますよね。
今回は自分のメモ用として応用しやすいタブの切り替えテンプレートを記事にまとめておきたいと思います。
デモページはこちら
このテンプレートでは、切り替えの挙動をjqueryで指定。
切り替えたそれぞれのタブとコンテンツのデザインをCSSで指定しています。
タブの数を増やしても問題なく機能しますのでさまざまなタブのデザインに応用できると思います！！
タブの切り替えコードの紹介
HTML
アクティブにするタブのclassにselectedをつけます。
jqueryで指定しているclassには全てja-をつけています。
<div class="tab__area">
<!-- タブここから -->
<ul class="tab__list">
<li class="tab__item selected"> <a href="#tab_1" class="js-tab-link selected">タブ01</a> </li>
<li class="tab__item"> <a href="#tab_2" class="js-tab-link">タブ02</a> </li>
<li class="tab__item"> <a href="#tab_3" class="js-tab-link">タブ03</a> </li>
</ul>
<!-- タブここまで -->
<!-- コンテンツここから -->
<div class="tab__inner js-tab-inner">
<div id="tab_1" class="pink js-tab-box">
<p>タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。</p>
</div>
<div id="tab_2" class="orange js-tab-box">
<p>タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。</p>
</div>
<div id="tab_3" class="green js-tab-box">
<p>タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。</p>
</div>
</div>
<!-- コンテンツここまで -->
</div>
jquery
$(function(){
$('.js-tab-link').click(function () {
$('.js-tab-box').hide().filter(this.hash).fadeIn();
$('.js-tab-link').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':eq(0)').click();
});
JQuery読み込んだ後に記述します。
<a href=”#xxx” class=”js-tab-link”>xxx</a>タグがクリックされたら
すべてのコンテンツ$(‘js-tab-box)を非表示hide()にしてfilter()をかけることで，特定の要素だけ表示します。
this.hashを使うと，クリックされたアンカーのハッシュ（#xxx）が取得できます。
selectedを.removeClass（削除）して、選択された.js-tab-linkにつけます。
return false;でa要素がクリックされた際にjQueryの命令だけが実行され、href属性に設定されたリンク先に移動しないようにします。
デフォルト時に先頭の<a href=”#tab_1″”>をクリックした状態にしておきます。
.filter(‘:eq(0)’).click();の0を変えると、デフォルト時にどのタブをアクティブにするか変えることができます。
CSS
.demo {
margin: 20px;
}
.demo__title{
margin: 20px;
font-size: 18px;
background: linear-gradient(transparent 70%, #fbd1d2 30%);
}
.demo__sub-text{
margin: 20px 20px 40px;
font-size: 13px;
}
.tab__area{
color: #333;
margin: 30px 10px;
width: auto;
font-size: 14px;
line-height: 1.6;
}
.tab__list{
display: table;
margin: 0 auto;
width: 90%;
zoom: 1;
table-layout: fixed;
border-spacing: 0;
}
.tab__item{
display: table-cell;
text-align: center;
font-size: 12px;
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.tab__item a{
display: block;
padding: 5px;
margin: 0 2px;
overflow: hidden;
position: relative;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px 3px 0 0;
font-size: 16px;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* hover時の背景色（グレー）の指定 */
.tab__item a:hover{
background-color: #eee;
}
/* タブ選択時の文字色の指定 */
.tab__item a.selected{
color: #fff;
}
/* タブ01（ピンク）の背景色と文字色の指定 */
.tab__item:first-child a.selected{
background-color: #f29196;
}
/* タブ02（オレンジ）の背景色と文字色の指定 */
.tab__item:nth-child(2) a.selected{
background-color: #ecaa7e;
}
/* タブ03（グリーン）の背景色と文字色の指定 */
.tab__item:nth-child(3) a.selected{
background-color: #afe9d7;
}
.tab__inner{
border: 1px solid #ccc;
margin-top: -1px;
}
/* タブ01（ピンク）選択時のコンテンツ内の背景色の指定 */
.tab__inner .pink{
padding: 20px;
background-color: #ffeced;
}
/* タブ02（オレンジ）選択時のコンテンツ内の背景色の指定 */
.tab__inner .orange{
padding: 20px;
background-color: #fff2df;
}
/* タブ03（グリーン）選択時のコンテンツ内の背景色の指定 */
.tab__inner .green{
padding: 20px;
background-color: #e9f4f0;
}
擬似要素＋a.selectedを利用して選択時のタブの色を指定しています。
タブ選択前のタブデザインもそれぞれ変更したい場合は擬似要素＋aで指定できますね！
こちらのテンプレートを使用すれば、それぞれのタブのデザインを変えることができるので汎用性の高いタブ切り替えができます！！
おすすめのjQuery参考書はこちら！
