jQueryでタブを作ってみた

今回はjQueryでタブを作ってみました。
タブは皆さんご存知の通りよくあるタブです！

Webサイトのページ内でコンテンツ要素が大量にある場合
そのまま表示させるとページが縦長になり
ブラウザ上で縦スクロールをしなければ
ページ下部のコンテンツを見る事は出来ません。

そんな時タブで表示・非表示を切り替えると
ページの縦幅が抑えられスッキリとした印象になり、
ユーザビリティの向上にも繋がると思います。

demo

ソース例

html

<div id=”tab-area”>
<ul>
<li id=”tab-btn0″><a href=”#tab-box0″>タブボックス0</a></li>
<li id=”tab-btn1″><a href=”#tab-box1″>タブボックス1</a></li>
<li id=”tab-btn2″><a href=”#tab-box2″>タブボックス2</a></li>
</ul>
<div id=”tab-box0″>
<p>タブボックス0コンテンツ</p>
<p>タブボックス0コンテンツ</p>
<p>タブボックス0コンテンツ</p>
</div>
<div id=”tab-box1″>
<p>タブボックス1コンテンツ</p>
<p>タブボックス1コンテンツ</p>
<p>タブボックス1コンテンツ</p>
</div>
<div id=”tab-box2″>
<p>タブボックス2コンテンツ</p>
<p>タブボックス2コンテンツ</p>
<p>タブボックス2コンテンツ</p>
</div>
</div>

css

#tab-area {
width:100%;
border:1px solid rgba(51,51,51,1);
margin-bottom:20px;
}
#tab-area ul {
display:table;
width:100%;
}
#tab-area ul li {
display:table-cell;
text-align:center;
}
#tab-area ul li a {
display:block;
text-decoration:none;
background-color:rgba(51,51,51,.5);
color:rgba(255,255,255,1);
padding:0.5em 0;
}
#tab-area ul li a:hover,
#tab-area ul li.current a {
background-color:rgba(51,51,51,1);
}

javascript

jQuery(function($){
function TabArea (TabBtn,TabLink,TabBox) {
$(‘#tab-btn0’).addClass(‘current’);
$(‘#tab-area > div:not(#tab-box0)’).hide();

$(TabLink).click(function(event){
$(‘#tab-area div[id^=tab-box]’).hide();
$(TabBox).fadeIn();
event.preventDefault();
$(TabBtn).addClass(‘current’);
$(‘#tab-area ul li:not(‘+TabBtn+’)’).removeClass(‘current’);
})
}
TabArea(‘#tab-btn0′,’#tab-area a[href=#tab-box0]’,’#tab-box0′);
TabArea(‘#tab-btn1′,’#tab-area a[href=#tab-box1]’,’#tab-box1′);
TabArea(‘#tab-btn2′,’#tab-area a[href=#tab-box2]’,’#tab-box2′);
})

とても簡単に作れますね！
カスタマイズも簡単に出来ますので
興味のある方は試してみて下さい。