タブ型メニューは、jQuery UIに含まれているが、単純なタブ型メニューであれば、jQuery UIを使わずとも、jQuery だけで簡単に作ることができる。
jQuery UI を使って作る方法については、Tabs / タブ – jQuery UI 日本語リファレンスのページへ。
実装例（サンプル）
- タブメニュー①
- タブメニュー②
- タブメニュー③
タブメニュー① の内容。
タブメニューは、jQueryで簡単に作れる。
jQuery UI を使って作るタブメニューもあるが、このような単純なタブメニューであれば、わざわざ、jQuery UI を用意するまでもない。
タブメニュー② の内容。
タブメニュー③の内容。
実装例の動作について
「タブメニュー①」「タブメニュー②」「タブメニュー③」の、それぞれのタブメニュー名をクリックすると、そのタブメニューの内容を開く。
ソースコード
JavaScript
<script type="text/javascript" src="jquery.js"></script>
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-tabs > ul > li' ) . click( function () {
var str = jQuery( 'input', this ) . val();
jQuery( '#jquery-sample-tabs > div' ) . not( str ) . css( 'display', 'none' );
jQuery( str ) . css( 'display', 'block' );
jQuery( this ) . css( { 'backgroundColor': '#ffffff', 'border-bottom': 'none' } );
jQuery( '#jquery-sample-tabs > ul > li' ) . not( this ) . css( { 'backgroundColor': '#e3e3e3', 'border-bottom': 'solid 1px #888888' } );
} ) . first() . click();
} );
// -->
</script>
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-tabs > ul > li' ) . click( function () {
var str = jQuery( 'input', this ) . val();
jQuery( '#jquery-sample-tabs > div' ) . not( str ) . css( 'display', 'none' );
jQuery( str ) . css( 'display', 'block' );
jQuery( this ) . css( { 'backgroundColor': '#ffffff', 'border-bottom': 'none' } );
jQuery( '#jquery-sample-tabs > ul > li' ) . not( this ) . css( { 'backgroundColor': '#e3e3e3', 'border-bottom': 'solid 1px #888888' } );
} ) . first() . click();
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-tabs {
padding: 5px 5px 10px 5px;
border: solid 1px #888888;
border-radius: 5px;
}
#jquery-sample-tabs ul {
margin: 0;
padding: 0 5px;
border-bottom: solid 1px #888888;
}
#jquery-sample-tabs ul li {
display: inline;
margin: 1px;
padding: 5px 20px;
border: solid 1px #888888;
border-radius: 5px 5px 0px 0px;
background-color: #e3e3e3;
cursor: pointer;
}
#jquery-sample-tabs div {
padding: 10px 15px;
}
-->
</style>
<!--
#jquery-sample-tabs {
padding: 5px 5px 10px 5px;
border: solid 1px #888888;
border-radius: 5px;
}
#jquery-sample-tabs ul {
margin: 0;
padding: 0 5px;
border-bottom: solid 1px #888888;
}
#jquery-sample-tabs ul li {
display: inline;
margin: 1px;
padding: 5px 20px;
border: solid 1px #888888;
border-radius: 5px 5px 0px 0px;
background-color: #e3e3e3;
cursor: pointer;
}
#jquery-sample-tabs div {
padding: 10px 15px;
}
-->
</style>
HTML
<div id="jquery-sample-tabs">
<ul>
<li>
<input id="#jquery-sample-tab-1" type="hidden" value="#jquery-sample-tab-1-contents" />
タブメニュー①
</li>
<li>
<input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-2-contents" />
タブメニュー②
</li>
<li>
<input id="#jquery-sample-tab-3" type="hidden" value="#jquery-sample-tab-3-contents" />
タブメニュー③
</li>
</ul>
<div id="jquery-sample-tab-1-contents">
<p>タブメニュー① の内容。</p>
<p>タブメニューは、jQueryだけでも簡単に作れる。</p>
<p>jQuery UI を使って作る方法もある。</p>
</div>
<div id="jquery-sample-tab-2-contents">
<p>タブメニュー② の内容。</p>
</div>
<div id="jquery-sample-tab-3-contents">
<p>タブメニュー③の内容。</p>
</div>
</div>
<ul>
<li>
<input id="#jquery-sample-tab-1" type="hidden" value="#jquery-sample-tab-1-contents" />
タブメニュー①
</li>
<li>
<input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-2-contents" />
タブメニュー②
</li>
<li>
<input id="#jquery-sample-tab-3" type="hidden" value="#jquery-sample-tab-3-contents" />
タブメニュー③
</li>
</ul>
<div id="jquery-sample-tab-1-contents">
<p>タブメニュー① の内容。</p>
<p>タブメニューは、jQueryだけでも簡単に作れる。</p>
<p>jQuery UI を使って作る方法もある。</p>
</div>
<div id="jquery-sample-tab-2-contents">
<p>タブメニュー② の内容。</p>
</div>
<div id="jquery-sample-tab-3-contents">
<p>タブメニュー③の内容。</p>
</div>
</div>