概要

jQueryを使った、タブの切り替え実装方法をまとめる。

実装例

仕組み

初期状態(htmlとcssの状態)
- タブ：一つ目のタブだけ色を変えておく
- コンテンツ：一つ目のコンテンツだけ「display : block;」（その他は「display : none;」）
jQueryでの処理（クリックした時に以下の処理がなされるように関数でまとめる）
- コンテンツ：
  - クリックされたタブの番号を取得
  - 内容を、一旦全部非表示にする
  - クリックされた番号のコンテンツを表示
- タブ：
  - 一つ目のタブの色を変えているクラスを消す。
  - クリックされたタブのみに、タブの色を変えるクラスをつける。

コード

html

<ul class="tab cf">
  <li class="tab1 tab_current">1つめ</li>
  <li class="tab2">2つめ</li>
  <li class="tab3">3つめ</li>
<ul class="contents">
  <li class="content1 content_current">ああああああああああ</li>
  <li class="content2">いいいいいいいいいい</li>
  <li class="content3">うううううううううう</li>
</ul>

css

.tab{
  list-style:none;
}
.cf{
  overflow : hidden;
}
.tab1, .tab2, .tab3 {
  float : left;
  background : #5f9ea0;
  padding : 5px 25px;
  margin-right : 1px;
}

.tab_current {
  background : #b0e0e6;
}
.content {
  list-style:none;
}

.content1, .content2, .content3 {
  display : none;
  background : #b0e0e6;
  padding : 20px;
  width : 500px;
}

.content_current {
  display : block;
}

jQuery


$(function() {
  // クリックしたときの関数
  $('.tab li').click(function() {

    // 〜〜コンテンツについての処理〜〜
    //クリックされたタブの番号をindexに格納。
    var index = $('.tab li').index(this);
    //コンテンツを一旦全て非表示に。
    $('.content li').css('display','none');
    // クリックされた番号のコンテンツを表示。
    $('.content li').eq(index).css('display','block');


    // 〜〜タブについての処理〜〜
    // 一度タブについている'tab_current'を消し
    $('.tab li').removeClass('tab_current');
    //クリックされたタブのみに'tab_current'をつける。
    $(this).addClass('tab_current')
	});
});

参考