超簡単タブメニュー《改》【jQuery】

小難しくなくて、わかりやすく

◆切り替えと画像差し替え

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/