概要
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')
});
});