タブの切替

基本的なタブの切替

$(function(){

 var prevView = 'btn1'; // 前回表示したのボタンクラス名

 var chgTab = function()
 {
 }

 /*
  * マウスオーバー処理
  */
 chgTab.prototype.btnOn = function ()
 {
  chgTab.apply(this);

  // クラス名を取得し、over用クラスに書き換え
  var nowClass = $(this).attr('class');
  var newClass = nowClass+'_o';
  var barClass = nowClass+'On';

  // 前回表示＝今回表示以外の場合動作する
  if(prevView != nowClass)
  {
   $(this).removeClass(nowClass).addClass(newClass);
  }
 }

 /*
  * マウスアウト処理
  */
 chgTab.prototype.btnOff = function()
 {
  // クラス名を取得し、通常クラスに書き換え
  var nowClass = $(this).attr('class');
  var newClass = nowClass.replace('_o','');
  $(this).removeClass(nowClass).addClass(newClass);
 }

 /*
  * クリック処理
  */
 chgTab.prototype.btnClick = function()
 {
  // chgTab.apply(this);

  /****** タブ下の変更 *********/
  var nowClass = $(this).attr('class').replace('_o','');
  var barClass = nowClass+'On';
  $('#tabBar').removeClass().addClass(barClass);


  /****** メイン部分の変更 *********/

  // 前回表示＝今回表示以外の場合動作する
  if(prevView != nowClass)
  {
   var mainClass = 'main'+nowClass.replace('btn','');
   // 前回表示
   var prevMain = 'main'+prevView.replace('btn','');

   $('.'+mainClass).css('display','block');
   $('.'+prevMain).css('display','none');
  }

  // 前回分を残す
  prevView = nowClass;
 }

 // トリガーの設定
 var btn1Obj = new chgTab;
 var btn2Obj = new chgTab;
 var btn3Obj = new chgTab;
 var btn4Obj = new chgTab;
 var btn5Obj = new chgTab;

 $('.btn1').hover(btn1Obj.btnOn,btn1Obj.btnOff);
 $('.btn1').click(btn1Obj.btnClick);
 $('.btn2').hover(btn2Obj.btnOn,btn2Obj.btnOff);
 $('.btn2').click(btn2Obj.btnClick);
 $('.btn3').hover(btn3Obj.btnOn,btn3Obj.btnOff);
 $('.btn3').click(btn3Obj.btnClick);
 $('.btn4').hover(btn4Obj.btnOn,btn4Obj.btnOff);
 $('.btn4').click(btn4Obj.btnClick);
 $('.btn5').hover(btn5Obj.btnOn,btn5Obj.btnOff);
 $('.btn5').click(btn5Obj.btnClick);

});