汎用的かつ手軽なタブ切り替えが見つからなかったので、自分でjQueryのコードを書いてみました。
まともなjQueryコードを書くのは初めてなので、あまり美しくはないかと存じます。
あと、実際にコンテンツを消しているのではなく、クラスの切り替えのみ行っております。
そのため、ソースを開けばそのまま中身が出力されますので、あらかじめご了承ください。
<!-- XHTML タブ表示部分 --> <div class="TabField"> <ul class="TabIndex"> <li>いぬ</li> <li>ねこ</li> </ul> <div class="TabContent"> <h2 class="">いぬ</h2> <div> <p>わんわんドッグ</p> </div> </div> <div class="TabContent"> <h2 class="tabtitle">ネコ</h2> <div> <p>にゃーにゃーキャット。</p> </div> </div> </div>
/* cssファイル */ .TabIndex{ clear:both; } .TabIndex li{ border:1px solid black; float:left; } .TabContent{ clear:both; } .EnableTabIndex{ color:#FF9900; } .DisableTabIndex{ color:#999999; } .EnableTab{ display:block; height:15em; width:300px; overflow:auto; } .DisableTab{ display:none; }
// jQueryを事前に読み込んでおくこと。 // 1.2.6にて確認 // 2008-07-17 初版作成 $(function(){ var conf = { // タブフィールド用クラス classTabField : 'TabField', // タブの見出し用ul classTabIndex : 'TabIndex', //タブのコンテンツ領域用 classTabContent : 'TabContent', //アクティブタブ見出し classEnableTabIndex : 'EnableTabIndex', //アクティブタブ中身 classEnableTabContent : 'EnableTab', //非表示タブ見出し classDisableTabIndex : 'DisableTabIndex', //非表示タブコンテンツ classDisableTabContent : 'DisableTab', }; //TabFieldを取得 $TabField = $('.' + conf.classTabField); //タブの初期設定 //全タブ・見出しdisable $('.' + conf.classTabIndex + ' li',$TabField) .addClass(conf.classDisableTabIndex); $('.' + conf.classTabContent) .addClass(conf.classDisableTabContent); $TabField.each(function(i){ $TabIndex = $("li",this); $TabContent = $("." + conf.classTabContent,this); //先頭タブ・見出しのEnable $($TabIndex[0]) .addClass(conf.classEnableTabIndex) .removeClass(conf.classDisableTabIndex); //タブコンテンツの初期表示 $($TabContent[0]) .addClass(conf.classEnableTabContent) .removeClass(conf.classDisableTabContent); $("." + conf.classTabIndex + " li",this) .each(function(j){ //見出しクリック時の処理 $(this).click(function(){ //全タブ見出しDisable $("."+conf.classTabIndex + " li",$TabField[i]) .removeClass(conf.classEnableTabIndex) .addClass(conf.classDisableTabIndex); //クリックした見出しEnable $(this) .addClass(conf.classEnableTabIndex) .removeClass(conf.classDisableTabIndex); //表示するタブコンテンツの取得 $CurrentContent = $("."+conf.classTabContent,$TabField[i]); //全タブ一旦非表示 $("." + conf.classTabContent,$TabField[i]) .addClass(conf.classDisableTabContent) .removeClass(conf.classEnableTabContent); //クリックしたタブのコンテンツ表示 $($CurrentContent[j]) .addClass(conf.classEnableTabContent) .removeClass(conf.classDisableTabContent); return false; }); }); }); });