jQueryでタブ切り替え
- 2011/12/31 17:40
- カテゴリー:制作, プログラム
- タグ:JavaScript
タブに見出しを表示し、クリックするとその内容が表示される仕組みです。少ないスペースにたくさんの情報を格納することができます。
利用、流用は自由にどうぞ。またプラグイン作成の基本は jQueryプラグインの作成メモ 前編 と jQueryプラグインの作成メモ 後編 を参考にしてください。
以下、内容を解説していきます。
HTML
HTMLは以下のとおりです。タブの見出しを ul
と li
で、表示する内容を div
でマークアップしています。最初に表示したい内容には、あらかじめ class="view"
を設定しておきます。また、後ほどクラス名をもとにjQueryのプラグインを反映させるため、id="sample"
を設定しています。
<div id="sample">
<ul>
<li><a href="#contents1" class="view">見出し1</a></li>
<li><a href="#contents2">見出し2</a></li>
<li><a href="#contents3">見出し3</a></li>
<li><a href="#contents4">見出し4</a></li>
<li><a href="#contents5">見出し5</a></li>
</ul>
<div id="contents1">
<p>コンテンツ1。</p>
</div>
<div id="contents2">
<p>コンテンツ2。</p>
</div>
<div id="contents3">
<p>コンテンツ3。</p>
</div>
<div id="contents4">
<p>コンテンツ4。</p>
</div>
<div id="contents5">
<p>コンテンツ5。</p>
</div>
</div>
CSS
CSSは以下のとおりです。ul
の内容(タブの見出し)は float
で横並びに表示しています。また class="view"
が設定されたタブは、選択状態であると判るように見た目を調整しています。
<style>
div#sample {
overflow: hidden;
width: 500px;
border: 1px solid #000000;
}
div#sample>ul {
margin: 0;
}
div#sample>ul li {
list-style: none;
float: left;
width: 100px;
background-color: #DDDDDD;
}
div#sample>ul li a {
display: block;
padding: 10px;
}
div#sample>ul li a.view {
background-color: #FFFFFF;
color: #000000;
font-weight: bold;
text-decoration: none;
}
div#sample>div {
overflow: hidden;
padding: 10px;
}
</style>
JavaScript
JavaScriptは以下のとおりです。まずはjQueryと、自作プラグインの jquery.tabpanel.js
を読み込みます。jquery.tabpanel.js
は、タブパネルを作成してくれるjQueryプラグインです。
<script src="../jquery.js"></script>
<script src="jquery.tabpanel.js"></script>
<script>
$(document).ready(function() {
$('#sample').tabpanel();
});
</script>
プラグイン
jquery.tabpanel.js
の内容は以下のとおりです。
(function($) {
$.fn.tabpanel = function() {
var target = $(this);
target.find('div:not(' + $(this).find('ul li a.view').attr('href') + ')').hide();
target.find('ul li a').click(function() {
if ($(this).hasClass('view')) {
return false;
}
target.find('div').hide();
target.find('div' + $(this).attr('href')).show();
target.find('ul li a').removeClass('view');
$(this).addClass('view');
return false;
});
return this;
};
})(jQuery);
まずは
target.find('div:not(' + $(this).find('ul li a.view').attr('href') + ')').hide();
の部分で、最初に表示する内容以外を非表示にします。このうち $(this).find('ul li a.view').attr('href')
の処理内容は
class="view"
が割り振られたa
タグを探す- その
a
タグのhref
属性(例えば#contents1
のような値が入る)を取得する
です。例えば #contents1
という値を取得した場合、この後に
target.find('div:not(#contents1)').hide();
という処理が実行されることになります。これは「contents1
というIDが割り振られた div
タグ以外を非表示にする」という意味です。これにより、最初に表示する内容以外が非表示になります。
target.find('ul li a').click(function() {
if ($(this).hasClass('view')) {
return false;
}
タブがクリックされたときに実行される処理です。ただし、class="view"
が割り振られたタブがクリックされても、何も処理しないようにしています。(表示中のタブがクリックされても、表示内容を切り替える必要が無いため。)
target.find('div').hide();
target.find('div' + $(this).attr('href')).show();
一旦すべてのタブを非表示にしてから、表示すべきタブの内容のみを表示しています。
target.find('ul li a').removeClass('view');
$(this).addClass('view');
タブに割り振られた class="view"
を削除し、代わりに今回クリックされたタブに対して class="view"
を設定しています。これで、タブがクリックされると表示内容が切り替わり、クリックしたタブが選択状態になります。
これで完成です。