小難しくなくて、わかりやすく
◆切り替えと画像差し替え
html側
<ul id="select">
<li><img src="img/btn_01_off.gif" id="select_01" /></a></li>
<li><img src="img/btn_02_off.gif" id="select_02" /></a></li>
</ul>
<div id="box_01" class="box"> 中身 </ div>
js側
$(".box").hide();//切り替えのBOXをすべて見えなくする
$("#box_01").show();//最初に見えるBOXを表示
$('#select_01').click(function(){
$("#box_02").hide();
$("#box_01").show();
$(this).attr("src","img/btn_01_on.gif");
$("#select_02").attr("src","img/btn_02_off.gif");
});
$('#select_02').click(function(){
$("#box_01").hide();
$("#box_02").show();
$(this).attr("src","img/btn_02_on.gif");
$("#select_01").attr("src","img/btn_01_off.gif");
});
※タグメニューが2つの場合のみ有効です。
◆上のソースを少し変えてフェードイン・フェードアウトさせる
※注：切り替える内容部分のBOXを重ねておかないと、変な動きをします。
positionで0,0
js側
$(".box").hide();//切り替えのBOXをすべて見えなくする
$("#box_01").show();//最初に見えるBOXを表示
$("#select_01").attr("src","img/btn_01_on.gif");//最初に見えるBOXのボタンをonにしておく
$('#select_01').click(function(){
$(".box:not(:animated)").fadeOut("slow",function(){
$("#box_01").fadeIn("slow");
});//コールバック関数、処理終わったらフェードインしてねの意
$(this).attr("src","img/btn_01_on.gif");
$("#select_02").attr("src","img/btn_02_off.gif");
});
$('#select_02').click(function(){
$(".box:not(:animated)").fadeOut("slow",function(){
$("#box_02").fadeIn("slow");//連続で押されないための処理
});
$(this).attr("src","img/btn_02_on.gif");
$("#select_01").attr("src","img/btn_01_off.gif");
});
◆tabが増えてもわざわざ書き出さない
--------------------- 参考サイト ----------------------
↓↓こっちはコピペで親切
・【jQuery】これで簡単！フェード処理で切り替わるタブコンテンツの作成方法 ｜ KLUTCHE
http://klutche.org/archives/682/
上のサイトを少し変更したものが↓
※hitmlはaタグ(アンカー)で飛び先を指定します。
▼ボタンを特に指定しないとき
$(".tab_content").hide();
$("ul.tabs li:first").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$(".tab_content").hide(); …★
var activeTab = $(this.hash);
$(activeTab).fadeIn();
return false;
});
★…「fadeOut」するときは、positionで0,0配置
▼ボタンをCSSできりかえたいとき
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this.hash);
$(activeTab).fadeIn();
return false;
※$(this.hash)…ここでいう、クリックしアンカーの「href」を取得したいときにつかう
--------------------- そのほかの参考サイト ----------------------
jQueryを使った簡単なタブ切り替えのサンプル｜ KADOYAN.com
http://www.kadoyan.com/item/509#nucleus_cf
【jQuery】これで簡単！フェード処理で切り替わるタブコンテンツの作成方法 ｜ KLUTCHE
http://klutche.org/archives/682/
