素材の壺

タブメニューをクリックしてコンテンツを切り替える、よく使う動作のjQueryです。シンプル且つ汎用的に、タブメニューが増減しても簡単に対応しやすい書き方を意識し、コンテンツを表示させる時にふわっと表示させるようフェードインさせています。

jQuery

※jQueryのコアファイル読み込み後に記述します

$('.tab li').click(function() {
//何個目のタブをクリックしたか
var index = $('.tab li').index(this);

//コンテンツを一旦非表示
$('.list .block').css('display','none');

//クリックしたタブに応じてコンテンツを表示
$('.list .block').eq(index).fadeIn();

//タブに付与したクラス(act)を除去
$('.tab li').removeClass('act');

//クリックしたタブにクラス(act)をつけます。
$(this).addClass('act')
});

HTML

メニュー1
メニュー2
メニュー3
メニュー4
メニュー5






コンテンツ1


コンテンツ2


コンテンツ3


コンテンツ4


コンテンツ5

ポイント

連続した要素の個数を取得してタブとコンテンツを連動させています。「div.block」はタブと同じくリストタグに置き換えてもシンプルで良いかと思います。

以上、タブメニューをクリックしてコンテンツを切り替えるjQueryでした。