jQueryでタブメニューを作る方法を解説!

今回はjQueryを用いて、タブメニューを制作する方法をサンプルコード付きで解説します。jQueryを用いることで、簡単にタブメニューを作ることができます。ぜひサンプルコードをコピペ、スタイルを調整して使用してください。

コンテンツ [表示]

  1. 1jQueryでタブメニューを作りたい
  2. 2jQueryでタブメニューを作る方法
  3. 2.1HTML
  4. 2.2CSS
  5. 2.3jQuery
  6. 3タブメニューの切り替えにアニメーションを付ける

jQueryでタブメニューを作りたい

今回はプラグインを使わずにjQueryを書いてこのようなデザインのタブメニューを作る方法を解説します。

jQueryでタブメニューを作る方法

HTML

<!-- タブメニュー -->
<a class="tab_menu active" href="#item1">タブ1</a>
<a class="tab_menu" href="#item2">タブ2</a>
<a class="tab_menu" href="#item3">タブ3</a>

<!-- タブのコンテンツ部分 -->
<div class="tab_item active" id="item1">タブ1のコンテンツ</div>
<div class="tab_item" id="item2">タブ2のコンテンツ</div>
<div class="tab_item" id="item3">タブ3のコンテンツ</div>

今回使用するHTMLはタブメニューとコンテンツ部分の2つに分かれています。

タブメニューでは選択されるとactiveクラスが付与され、それぞれのコンテンツが表示される仕組みとなっています。

idを付与することで、タブメニュークリックした時に同じidのコンテンツが表示されるようになります。

CSS

タブメニューの実装に重要な部分は、activeクラスに関する記述です。

もとの状態でのスタイルと、選択されたときのactiveクラスが付与されたときのスタイルの2種類を用意します。

2種類用意することでjQueryでクラスの付与、排除を行ってスタイルを切り替えることができるという仕組みです。

CSS

/*最初は表示されないように*/
.tab_item {
  display: none;
}

/*activeクラスが付与されたとき*/
.active {
  display: block;
  opacity: 1;
  border-bottom: solid 1px tomato;
  background: tomato;
  color: #fff;
}

a { 
  cursor: pointer;
  color: tomato;
}

.tab_menu {
  display: inline-block;
  width: 100px;
  padding: 5px;
  font-size: 18px;
  text-align: center;
  border-radius: 8px 8px 0 0;
  border: solid 1px tomato;
}

.tab_item {
  font-size: 16px;
  height: 200px;
  padding: 20px;
  background-color: tomato;
}

元々のコンテンツ部分には display: none; をかけて非表示状態にしておき、activeクラスがついたコンテンツだけ表示されるようにします。

また、タブメニューを display: inline-block; で横並びにしておきましょう。

これで見た目はいい感じになりました。次はjQueryで動きをつけていきます。

jQuery

jQueryのアクションイベントの多くは、「〇〇を押したら△△クラスをつける」「〇〇を押したら△△クラスを外す」を行っているだけです。

ここでは、
①タブメニューをクリックしたらactiveクラスを外し、
②クリックしたメニューにだけactiveクラスを付与する
という処理を行っていきます。

$(function() {
	//タブをクリックしたら発動
	$('.tab_menu').on('click', function() {
		//選択されていた.tab_itemからactiveクラスを取り除く
		$('.tab_item').removeClass('active');
		//クリックされた.tab_itemにactiveクラスを付与
		$($(this).attr('id')).addClass('active');
		//選択されていた.tab_menuからactiveクラスを取り除く
		$('.tab_menu').removeClass('active');
		//クリックされた.tab_menuにactiveクラスを付与
		$(this).addClass('active');
	});
});

クリックされたtabにactiveクラスを付与する.addClass()メソッド前に、選択されていたtabからactiveクラスを取り除く処理.removeClass()メソッドがないと、前にクリックしたコンテンツ部分が表示されたままになってしまうので忘れないようにしましょう。

タブメニューの切り替えにアニメーションを付ける

上記のサンプルコードでは、タブを切り替えるとシンプルにリストの中身が変わるようなデザインでした。

次はjQueryに変更を加えて、タブメニューの切り替え時にアニメーションをつけていきたいと思います。

ここでは、タブメニューをクリックすると「フワッ」とコンテンツが切り替わるように、フェードインを使用してアニメーションを実装していきます。

$(function() {
	$('.tab_menu').on('click', function() {
		$('.tab_item').removeClass('active');
		$($(this).attr('id')).addClass('active');
		$('.tab_menu').removeClass('active');
		$(this).addClass('active');
	});

    //ここから下を追加
  
    $('.tab_menu').click(function() {
        //コンテンツを一旦非表示
        $('.tab_item').css('display','none');
        //クリックしたタブに応じてコンテンツを表示
        $($(this).attr('id')).fadeIn(500).addClass('active');
        });
});

これで「フワッ」とコンテンツが切り替わるようになりました。

fadeIn()メソッドの引数には1ミリ秒を単位とする時間の指定が可能です。
つまり、fadeIn(500)と記述すると、0.5秒かけて表示するという意味になります。引数を変えて自分好みに調節してみてください。

また、Swiperというプラグインを使えば簡単にスライドをつくることができます。
いろいろ試して自分にとって最適なアニメーションを実装してみてください。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。