今回の内容

• ・タブ切替の実装

タブ切替といっても大した事はしていません。
htmlの構造としては
１：タブ部分
２：コンテンツ表示部分
の２つが基本的には存在しています。
IDやclassで指定しても良いですし、要素の順番で切り替えてもいい。その辺はお好みで。

タブ切替(要素の順番で切り替え)

html構造の例

<ul id="tabCtrl">
  <li>タブ１</li>
  <li>タブ２</li>
  <li>タブ３</li>
</ul>
<div id="tabContents">
  <div>タブ１の内容</div>
  <div>タブ２の内容</div>
  <div>タブ３の内容</div>
</div>

処理

var prevLiNum = 0, // 前回のタブ番号、初期値は0
nowLiNum  = 0; // 今回のタブ番号、初期値は0

//**************************************
// タブ部分のコントロール処理
//**************************************
$('#tabCtrl').children('li').on('click',function()
{
  // クリックされたliは何番目なのかを取得
  nowLiNum = $(this).index();

  // 前回分と同じ所をクリックしている場合は処理の終了
  if(nowLiNum == prevLiNum) return false;

  // 前回分を非表示にする
  $('#tabCtrl').children('li').eq(prevLiNum).removeClass('on');
  $('#tabContents').children('div').eq(prevLiNum).hide();

  // 今回分を表示する
  $('#tabCtrl').children('li').eq(nowLiNum).addClass('on');
  $('#tabContents').children('div').eq(nowLiNum).show();

  // 今回分を次回用に前回分として保持
  prevLiNum = nowLiNum;

  return false;
});

実際に組んでみた。

• うーちゃん！
• うーちゃん？
• うーちゃんっ

結構シンプルですね。
順番のタブ切替はこんな感じ。

タブ切替(class名で判別して切替)

html構造の例

<ul id="tabCtrl">
  <li class="tab1">タブ１</li>
  <li class="tab2">タブ２</li>
  <li class="tab3">タブ３</li>
</ul>
<div id="tabContents">
  <div class="tab1Main">タブ１の内容</div>
  <div class="tab2Main">タブ２の内容</div>
  <div class="tab3Main">タブ３の内容</div>
</div>

処理

var prevLiClass = 'tab1', // 前回のタブクラス名、初期値はtab1
nowLiClass  = 'tab1'; // 今回のタブ番号、初期値はtab1

//**************************************
// タブ部分のコントロール処理
//**************************************
$('#tabCtrl').children('li').on('click',function()
{
  // クリックされたliのクラス名を取得
  nowLiClass = $(this).attr('class');

  // もし、liに他のクラスが付いている場合はここで余分なクラス名を削除
  // nowLiClass = nowLiClass.replace('【除外するクラス名】',''); // みたいな感じ

  // 前回分と同じ所をクリックしている場合は処理の終了
  if(nowLiClass == prevLiClass) return false;

  // 前回分を非表示にする
  $('.'+prevLiClass).removeClass('on');
  $('.'+prevLiClass+'Main').hide();

  // 今回分を表示する
  $('.'+nowLiClass).addClass('on');
  $('.'+nowLiClass+'Main').show();

  // 今回分を次回用に前回分として保持
  prevLiClass = nowLiClass;

  return false;
});

サンプルにはしませんが、class指定の場合は上記のような形になります。
今回はパッパッと切り替わっていましたが、切り替える手法を変更する事で
また違った印象も出せますよね。

タブ切替(スライドして切り替わる系)

というわけで、スライドして切り替わるようにしましょう。
ただ単純にスライドしてくるだけではつまらないので、左右判定して出してくれるようにやってみようと思います。

html構造の例

<ul id="tabCtrl2">
  <li class="tab1">タブ１</li>
  <li class="tab2">タブ２</li>
  <li class="tab3">タブ３</li>
</ul>
<div id="tabContents2">
  <div class="tab1Main">タブ１の内容</div>
  <div class="tab2Main">タブ２の内容</div>
  <div class="tab3Main">タブ３の内容</div>
</div>

処理

var prevLiNum = 0, // 前回のタブ番号、初期値は0
    nowLiNum  = 0, // 今回のタブ番号、初期値は0
    moveFlg   = 0; // アニメーション動作フラグ 0:未動作 1:動作中

//**************************************
// タブ部分のコントロール処理
//**************************************
$('#tabCtrl2').children('li').on('click',function()
{

  // 既に動作中の場合は処理の終了
  if(moveFlg == 1) return false;
  moveFlg = 1;

  // 前回分と同じ所をクリックしている場合は処理の終了
  // 動作中フラグをへし折る
  if($(this).index() == prevLiNum)
  {
    moveFlg = 0;
    return false;
  }

  // クリックされたliは何番目なのかを取得
  nowLiNum = $(this).index();

  // タブ部分の切り替え
  $('#tabCtrl2').children('li').eq(prevLiNum).removeClass('on');
  $('#tabCtrl2').children('li').eq(nowLiNum).addClass('on');

  // 前回分と今回分でどちらが大きい数値なのか
  if(nowLiNum > prevLiNum)
  {
    // クリックしたほうが大きい
    // 右から左へスライド

    $('#tabContents2').children('div').eq(prevLiNum).animate({'left':'-454px'},1000,'',function()
    {
      // スライド完了後に前回分を非表示に、動作フラグをへし折る、前回分ように今回分を入れ込む
      $(this).hide();
      moveFlg = 0;
      prevLiNum = nowLiNum;
    });
    $('#tabContents2').children('div').eq(nowLiNum).show().css('left','454px').animate({'left':'0px'},1000,'');

  }
  else
  {
    // クリックしたほうが小さい
    // 左から右へスライド

    $('#tabContents2').children('div').eq(prevLiNum).animate({'left':'454px'},1000,'',function()
    {
      // スライド完了後に前回分を非表示に、動作フラグをへし折る、前回分ように今回分を入れ込む
      $(this).hide();
      moveFlg = 0;
      prevLiNum = nowLiNum;
    });
    $('#tabContents2').children('div').eq(nowLiNum).show().css('left','-454px').animate({'left':'0px'},1000,'');
  }
  return false;
});

• ちゃんうー
• うちゃーん
• うーさん