2018年5月26日

タブメニューをクリックしてコンテンツを切り替えるjQuery

タブメニューをクリックしてコンテンツを切り替える、よく使う動作の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でした。

, , ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です