先日「【怖くないJavaScript + jQuery】シンプルなアコーディオン」という記事を書いたのですが、今回はその続編でタブについてです。
ほんとにタブの機能だけで良い時。たとえばメッセージのページを作っていて、受信トレイと送信トレイのふたつのタブだけで良いのよ、っていう時。
余計な機能がいらない時に使ってください。
合言葉は「jQuery コワクナイ」です。
Step1：まず下準備
こちらは前回と同じですね。まず必要なファイルを読み込みます。headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は my_tab.js とします）を読み込みます。
<head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script src="common/js/my_tab.js" type="text/javascript"></script>
</head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script src="common/js/my_tab.js" type="text/javascript"></script>
</head>
Step2:次にHTMLの準備
<div id="tab">
<ul>
<li class="now">タブ00</li>
<li>タブ01</li>
<li>タブ02</li>
<li>タブ03</li>
<li>タブ04</li>
</ul>
</div>
<div class="contents">ここに タブ00 がアクティブの時に表示する内容</div>
<div class="contents">ここに タブ01 がアクティブの時に表示する内容</div>
<div class="contents">ここに タブ02 がアクティブの時に表示する内容</div>
<div class="contents">ここに タブ03 がアクティブの時に表示する内容</div>
<div class="contents">ここに タブ04 がアクティブの時に表示する内容</div>
<ul>
<li class="now">タブ00</li>
<li>タブ01</li>
<li>タブ02</li>
<li>タブ03</li>
<li>タブ04</li>
</ul>
</div>
<div class="contents">ここに タブ00 がアクティブの時に表示する内容</div>
<div class="contents">ここに タブ01 がアクティブの時に表示する内容</div>
<div class="contents">ここに タブ02 がアクティブの時に表示する内容</div>
<div class="contents">ここに タブ03 がアクティブの時に表示する内容</div>
<div class="contents">ここに タブ04 がアクティブの時に表示する内容</div>
タブはliで組みました。jsで「並んでいるのliが、何番目のリストか」で判定しているので必ずこのliの型は崩さないで下さい。id=”tabのdivで囲むのも忘れると動かなくなります。
中身は好きにいじって構いません。画像を使用したい場合はliの背景に設定すると良いと思います。class=”now“が設定されているタブが、今アクティブなタブです。
その下のclass=”contents“がついているdivが、表示する内容です。jsで始めのcontents以外は勝手に非表示にするように
設定してありますので、改めて消す必要はありません。
Step4:jsを書き込む
最後に、headerで読み込んでいるはずの my_tab.js の中身を書き込んでいきましょう。DreamWeaverなどでjavascriptのファイルを新規作成してそのままこちらをコピペするだけでもいいと思います。
$(function (){
$(".contents:gt(0)").css("display","none");
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$("#tab li").removeClass("now");
$(this).addClass("now");
$(".contents").css("display","none");
$(".contents").eq(num).css("display","block");
});$("#tab li").removeClass("now");
$(this).addClass("now");
$(".contents").css("display","none");
$(".contents").eq(num).css("display","block");
});
解説を入れるとこう。
$(function (){
//まず、00番目より後の.contentsをdisplay:none;で全て非表示にするよ
$(".contents:gt(0)").css("display","none");
//#tabの中のliタグがクリックされた時にfunctionの中身を実行してね
$("#tab li").click(function() {
//何番目のliタグがクリックされたのか判定する、その値をnumに持っていてもらう
var num = $("#tab li").index(this);
//一旦、#tabの中の全てのliタグからclass=”now”をとる
$("#tab li").removeClass("now");
//クリックしたやつ（this）にnowのクラスをつける
$(this).addClass("now");
//一旦、.contentsのdivを全部非表示する
$(".contents").css("display","none");
//先程判定したnumの値を使用。順番num個目の.contentsを表示する。3番目のliをクリックしたら3番目の.contentsが表示になる
$(".contents").eq(num).css("display’,’block");
});
});
//まず、00番目より後の.contentsをdisplay:none;で全て非表示にするよ
$(".contents:gt(0)").css("display","none");
//#tabの中のliタグがクリックされた時にfunctionの中身を実行してね
$("#tab li").click(function() {
//何番目のliタグがクリックされたのか判定する、その値をnumに持っていてもらう
var num = $("#tab li").index(this);
//一旦、#tabの中の全てのliタグからclass=”now”をとる
$("#tab li").removeClass("now");
//クリックしたやつ（this）にnowのクラスをつける
$(this).addClass("now");
//一旦、.contentsのdivを全部非表示する
$(".contents").css("display","none");
//先程判定したnumの値を使用。順番num個目の.contentsを表示する。3番目のliをクリックしたら3番目の.contentsが表示になる
$(".contents").eq(num).css("display’,’block");
});
});
デモ
- タブ00
- タブ01
- タブ02
- タブ03
- タブ04
ここに タブ00 がアクティブの時に表示する内容
ここに タブ01 がアクティブの時に表示する内容
ここに タブ02 がアクティブの時に表示する内容
ここに タブ03 がアクティブの時に表示する内容
ここに タブ04 がアクティブの時に表示する内容
