カテゴリー：jQuery

概要

前のよりもう少し実用的なサンプルです。

サンプルの構造は次のようになっています。

タブのブロック全体がclass="tab"、タブそのものになるリスト（ul）にはclass="tablist"、デフォルトで選択されているタブ（li）にはclass="tabDefault"をつけています。
tabDefault自体は目印になっているだけなので、実際に選ばれたタブのスタイルを決めているクラスはtabChoosedです。
あとは、タブの内容になるブロックに任意のIDをつけ、対応するタブ（li）内のラベルからページ内リンクさせています。

というわけで、こちらもJavaScriptが使えない場合には、ページ内リンクとして機能するようになっています。まじめなあなたも安心？

スクリプト

$(document).ready(function() {
 //初期化
 $(".tab/div").hide();
 var tabDefault = $(".tabDefault").attr("href").split("#");
 $(".tabDefault").parent().addClass("tabChoosed");
 $("#"+tabDefault[tabDefault.length-1]).show();
 //
 $(".tablist/li/a").click(function() {
  splitID = $(this).attr("href").split("#");
  targetID = "#"+splitID[splitID.length-1];
  $(".tab/div").hide();
  $(".tablist/li").removeClass();
  $(this).parent().addClass("tabChoosed");
  $(targetID).show();
  return false;
 });
});

サンプルCSS

.tablist,
.tablist li {
 margin: 0;
 padding: 1px 0;/*padding-topはWin IEバグ対策*/
}
.tablist li {
 float: left;
 margin-right: 2px;
 padding: 1px 4px;
 list-style: none;
 font-weight: normal;
 background: #eee;
 border: 1px solid #999;
}
.tablist li.tabChoosed {
 font-weight: bold;
 background: #fff;
 border-bottom: 0;
}
.tab #tab1,
.tab #tab2,
.tab #tab3 {
 clear: both;
 padding: 2px 5px;
 background: #fff;
 border: 1px solid #999;
}
/*clearfix*/
.tab:after {
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
}
* html .tab:after {
 zoom: 1;
}