jQueryでタブメニューを実装（テキストメニュー版）

jQuery2010年8月11日

よく見かけるタブメニューによるコンテンツ切り替えのテクニックをご紹介します。jQueryで実装すればパフォーマンスもよく、使いどころを間違えなければユーザーに対しストレスなくわかりやすいコンテンツを提供することができます。プラグインを使用したサンプルもよく見かけますが、実はこのくらいの機能はjQuery単体で容易に実装できます。
実装サンプルおよびコード例を下記に記しましたので、どうぞご自由にお使いください。

HTML

<div class="tab-box">
<ul class="nav clearFix">
<li><a href="#tab-01">メニュー1</a></li>
<li><a href="#tab-02">メニュー2</a></li>
<li><a href="#tab-03">メニュー3</a></li>
</ul>
<div id="tab-01">
<p>メニュー1のコンテンツ<p>
</div>
<div id="tab-02">
<p>メニュー2のコンテンツ<p>
</div>
<div id="tab-03">
<p>メニュー3のコンテンツ<p>
</div>
</div>

CSS

*{margin:0;padding:0;}
body{ padding:10px;}
div.tab-box{
width:600px;
}
ul.nav{
list-style:none;
margin:0;
padding:0;
height:25px;
}
ul.nav li {
width:90px;
float:left;
}
ul.nav li a {
padding:3px 5px;
background:#ccc;
color:#000;
text-decoration:none;
display:block;
text-align:center;
}
ul.nav li a.selected,
ul.nav li a:hover {
background:#333;
color:#fff;
}
ul.nav li a:focus {
outline: 0;
}
div.tab-box div {
padding:5px;
margin-top:4px;
#margin-top:0;/*IE-BugFix*/
_margin-top:0;/*IE-BugFix*/
border:5px solid #333;
}
.clearFix:after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
zoom:1;
}

Javascript

$(function () {
var tabContainer = $('div.tab-box div');
tabContainer.hide().filter(':first').show();
$('div.tab-box ul.nav a').click(function () {
tabContainer.hide();
tabContainer.filter(this.hash).show();
$('div.tab-box ul.nav a').removeClass('selected');
$(this).addClass('selected');
return false;
})
.filter(':first').click();
});

何をしているかというと、「tabContainer.hide().filter(':first').show();」でページ初期表示は一つ目のdiv、すなわち「id="tab-01"」を表示します。
そして、メニューをクリックしたタイミングで、クリックしたメニュー以外のdivを非表示にし、クリックしたメニューのdivのみを表示する、という処理を行っています。
メニューをクリックした際、「selected」というクラスを付与し、カレント表示します。もちろん他のメニューをクリックした場合は「removeClass」でクラスを外しています。

jQueryで何かの要素を「表示」「非表示」にする切り替えの処理はかなり応用が利くので、コツをつかむと結構色々できるようになります。タブメニューもその応用のひとつです。

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。