jQueryを使ったタブ切り替えインターフェース

カテゴリー:jQuery

概要

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

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

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

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

ここには最初のタブの内容が入ります。

ここには2つめのタブの内容が入ります。

DIVの表示を切り替えてタブにしているという感じです。

ここには3つめのタブの内容が入ります。

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;
}

2007年6月17日(日曜日)/03時09分 - kadoyan -
Yahoo!ブックマークに登録Yahoo!ブックマークに登録はてなブックマークに追加はてなブックマークに追加

トラックバックURL:

 
%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%30%35%65%31%30%34%63%32%62%38%36%66%39%61%33%66%33%66%62%34%38%32%64%34%64%65%63%34%61%34%30%38%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%32%33%35%34%38%36%31%30%66%63%62%33%66%34%64%32%31%30%36%32%33%37%39%33%35%38%64%38%61%39%30%64%22%3e
CATEGORY