1. ホーム /
  2. jQuery /
  3. jQueryでタブメニューを簡単に自作する2つの方法

jQueryでタブメニューを簡単に自作する2つの方法

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryでプラグインに頼らず、簡単にタブメニューを実装する方法のご紹介です。

プラグインを使わなくても意外と簡単に実装できますので、ぜひ試してみてください。

CSSでデザインする方法と、画像を使う方法の2パターンをご紹介します。

CSSでデザインする

まずはCSSでデザインするタブメニューのソースコードを一気に全部ご紹介します。

ソースコード

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- タブメニュー
activeクラスに、クリック済のデザインを設定したcssを指定 -->
<ul class="tab clearfix">
  <li class="active">関東</li>
  <li>関西</li>
  <li>九州</li>
</ul>
 
<!-- コンテンツ
全体を非表示にし、showクラスが付いたコンテンツのみ表示 -->
<div class="area">
  <ul class="show">
    <li>東京</li>
    <li>新宿</li>
    <li>横浜</li>
  </ul>
  <ul>
    <li>梅田</li>
    <li>難波</li>
    <li>三宮</li>
  </ul>
  <ul>
    <li>小倉</li>
    <li>博多</li>
    <li>久留米</li>
  </ul>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.tab {
  border-bottom: 3px solid #fb4343;
}
.tab li {
  color: #333;
  float: left;
  margin: 0 10px -1px 0;
  padding: 10px 20px;
  border: 1px solid #fb4343;
  cursor: pointer;
  list-style: none;
  transition: .3s;
}
.tab li.active {
  color: #fff;
  background: #fb4343;
  cursor: auto;
}
 
.area ul {
  display: none;
}
.area ul.show {
  display: block;
}

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
 
  // ①タブをクリックしたら発動
  $('.tab li').click(function() {
 
    // ②クリックされたタブの順番を変数に格納
    var index = $('.tab li').index(this);
 
    // ③クリック済みタブのデザインを設定したcssのクラスを一旦削除
    $('.tab li').removeClass('active');
 
    // ④クリックされたタブにクリック済みデザインを適用する
    $(this).addClass('active');
 
    // ⑤コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示
    $('.area ul').removeClass('show').eq(index).addClass('show');
 
  });
});

 結果（動作サンプル）

以下タブメニューをクリックすると切り替わるかと思います。

  • 関東
  • 関西
  • 九州
  • 東京
  • 新宿
  • 横浜
  • 梅田
  • 難波
  • 三宮
  • 小倉
  • 博多
  • 久留米

解説

上記サンプルは以下のように動作しています。

HTML

1
<ul class="tab clearfix">

タブメニューになっています。clearfixクラスはcssのfloatによる表示の崩れを防いでくれます。

1
<li class="active">関東</li>

タブをクリックすると上記のようにactiveクラスが付与され、赤いタブに切り替わります。

1
<div class="area">

ここにタブをクリックしたら表示されるコンテンツが入っています。

1
<ul class="show">

デフォルトはcssで非表示になっていますが、タブをクリックすると対応するコンテンツにshowクラスが付与され、隠れていたコンテンツが表示されます。

CSS

.tab liのmargin: 0 10px -1px 0;の-1pxは、タブボタンとタブメニューの下線が離れているので、くっつけてそれらしく見せるために設定しています。

transition: .3s;はタブメニューをクリックした際に、フワッとアニメーションしながら切り替わるよう設定しています。

.area ulはdisplay: none;により非表示に設定しています。

.area ul.showにdisplay: block;を設定することで.showが付与された要素のみを表示させています。

jQuery

①タブをクリックしたら発動

1
2
// ①タブをクリックしたら発動
$('.tab li').click(function() {

.tabのli要素をクリックしたら発動します。

参考：jQueryのclick()で処理を実行&無効にする方法

②クリックされたタブの順番を変数に格納

1
2
// ②クリックされたタブの順番を変数に格納
var index = $('.tab li').index(this);

クリックしたタブメニューの順番を変数に格納します。

index()は特定の要素を検索するメソッドですが、引数にthisを入れるとクリックした順番が取得できます。

後ほどこの変数を使って、実際に表示させるコンテンツの内容を決めます。

③クリック済みタブのデザインを設定したcssのクラスを一旦削除

1
2
// ③クリック済みタブのデザインを設定したcssのクラスを一旦削除
$('.tab li').removeClass('active');

クリックされたタブは赤色になりますが、これを一旦リセットします。

removeClass()で、クリック済みタブのデザインを設定したクラスactiveを削除すればOKです。

参考：removeClass() でclassを削除する

④クリックされたタブにクリック済みデザインを適用する

1
2
// ④クリックされたタブにクリック済みデザインを適用する
$(this).addClass('active');

クリックされたタブに、cssでクリック済みデザインが適用されたactiveクラスを付与します。

これで赤色のタブに切り替わります。

参考：jQueryの$(this)の使い方(どこを指してるのか？)
参考：addClass() でclassを追加する

⑤コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示

1
2
// ⑤コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示
$('.area ul').removeClass('show').eq(index).addClass('show');

現在表示中のコンテンツに付与されているshowクラスをremoveClass()で一旦削除し、全て非表示にします。

eq()は引数に指定した順番にのみ適用させることができるので、②で準備しておいた順番を示す変数indexを引数に設定します。

eq(index)で指定した順番の要素にaddClass()でクラスshowを付与し、クリックされたタブに対応するコンテンツを表示させます。

参考：jQueryのeq()で順番を指定する方法

画像で実装する

次に画像を使ったタブメニューのソースコードを一気にご紹介します。

ソースコード

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- タブメニュー
ファイル名に_onが付くとクリック済みボタンの画像に切り替わる -->
<ul class="tab clearfix">
  <li><img src="/images/tab01_on.png" alt="関東"></li>
  <li><img src="/images/tab02_off.png" alt="関西"></li>
  <li><img src="/images/tab03_off.png" alt="九州"></li>
</ul>
 
<!-- コンテンツ
全体を非表示にし、showクラスが付いたコンテンツのみ表示 -->
<div class="area">
  <ul class="show">
    <li>東京</li>
    <li>新宿</li>
    <li>横浜</li>
  </ul>
  <ul>
    <li>梅田</li>
    <li>難波</li>
    <li>三宮</li>
  </ul>
  <ul>
    <li>小倉</li>
    <li>博多</li>
    <li>久留米</li>
  </ul>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.tab {
  border-bottom: 3px solid #ff3366;
}
.tab li {
  float: left;
  margin: 0 10px -1px 0;
  cursor: pointer;
  list-style: none;
}
 
.area ul {
  display: none;
}
.area ul.show {
  display: block;
}

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(function() {
 
  // ①タブをクリックしたら発動
  $('.tab li').click(function() {
 
    // ②クリックされたタブの順番を変数に格納
    var index = $('.tab li').index(this);
 
    // ③画像を一旦非クリックの状態にリセットするためのループ処理
    $('.tab li img').each(function() {
 
      // ④_onのファイル名を_offに書き換え、変数に格納
      var file = $(this).attr('src').replace(/_on/g, '_off');
 
      // ⑤書き換えたファイル名をimg要素に適用する
      $(this).attr('src', file);
    });
 
    // ⑥改めてクリックされた画像のファイル名を_onに書き換え、変数に格納
    var file2 = $(this).children('img').attr('src').replace(/_off/g, '_on');
 
    // ⑦書き換えたファイル名をimg要素に適用する
    $(this).children('img').attr('src', file2);
 
    // ⑧コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示
    $('.area ul').removeClass('show').eq(index).addClass('show');
 
  });
});

 結果（動作サンプル）

以下タブメニューをクリックすると切り替わるかと思います。

  • 関東
  • 東京
  • 新宿
  • 横浜
  • 梅田
  • 難波
  • 三宮
  • 小倉
  • 博多
  • 久留米

解説

上記サンプルは以下のように動作しています。

HTML

1
<ul class="tab clearfix">

タブメニューになっています。clearfixクラスはcssのfloatによる表示の崩れを防いでくれます。

1
<div class="area">

ここにタブをクリックしたら表示されるコンテンツが入っています。

1
<ul class="show">

デフォルトはcssで非表示になっていますが、タブをクリックすると対応するコンテンツにshowクラスが付与され、隠れていたコンテンツが表示されます。

CSS

.tab liのmargin: 0 10px -1px 0;の-1pxは、タブボタンとタブメニューの下線が離れているので、くっつけてそれらしく見せるために設定しています。

.area ulはdisplay: none;により非表示に設定しています。

.area ul.showにdisplay: block;を設定することで.showが付与された要素のみを表示させています。

jQuery

①タブをクリックしたら発動

1
2
// ①タブをクリックしたら発動
$('.tab li').click(function() {

.tabのli要素をクリックしたら発動します。

②クリックされたタブの順番を変数に格納

1
2
// ②クリックされたタブの順番を変数に格納
var index = $('.tab li').index(this);

クリックしたタブメニューの順番を変数に格納します。

index()は特定の要素を検索するメソッドですが、引数にthisを入れるとクリックした順番が取得できます。

後ほどこの変数を使って、実際に表示させるコンテンツの内容を決めます。

③画像を一旦非クリックの状態にリセットするためのループ処理

1
2
// ③画像を一旦非クリックの状態にリセットするためのループ処理
$('.tab li img').each(function() {

クリックされたタブは赤色になりますが、これを一旦リセットします。

全てのタブ画像のファイル名を対象にリセットしたいのでeach()で1つずつ処理していきます。

参考：each() でのループ処理

④_onのファイル名を_offに書き換え、変数に格納

1
2
// ④_onのファイル名を_offに書き換え、変数に格納
var file = $(this).attr('src').replace(/_on/g, '_off');

クリックされたタブ画像のファイル名には_onが付いているので、これをreplace()で_offに書き換えていきます。

その結果を変数に格納します。

参考：jQueryでreplace()を使って置換・削除する

⑤書き換えたファイル名をimg要素に適用する

1
2
// ⑤書き換えたファイル名をimg要素に適用する
$(this).attr('src', file);

書き換えたファイル名をattr()を使ってHTMLのimg要素に適用していきます。

参考：jQueryのattr()でHTML属性の設定･取得･削除

⑥クリックされた画像のファイル名を_onに書き換え、変数に格納

1
2
// ⑥改めてクリックされた画像のファイル名を_onに書き換え、変数に格納
var file2 = $(this).children('img').attr('src').replace(/_off/g, '_on');

クリックされた画像のファイル名をreplace()で書き換えていきます。

クリックされたタブの子要素の画像を書き換えるためchildren()を使って指定しています。

参考：children() で子要素を取得

⑦書き換えたファイル名をimg要素に適用する

1
2
// ⑦書き換えたファイル名をimg要素に適用する
$(this).children('img').attr('src', file2);

書き換えたファイル名をattr()を使ってHTMLのimg要素に適用していきます。

⑧コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示

1
2
// ⑧コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示
$('.area ul').removeClass('show').eq(index).addClass('show');

CSSでデザインする項でもご紹介しましたが、現在表示中のコンテンツに付与されているshowクラスをremoveClass()で一旦削除し、全て非表示にします。

eq()は引数に指定した順番にのみ適用させることができるので、②で準備しておいた順番を示す変数indexを引数に設定します。

eq(index)で指定した順番の要素にaddClass()でクラスshowを付与し、クリックされたタブに対応するコンテンツを表示させます。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

  1. 亜藍 より:
    2017年9月12日 22:13

    初めまして。大変、役に立ちました。ありがとうございます。この記事に対して質問なのですが、CSS編のタブメニューですが、コンテンツをフェードイン/アウトさせたいのですが、どうしたらよいか、ご教授お願い致します。

    返信
    1. flatFlag より:
      2017年12月2日 13:43

      コメントありがとうございます。
      なるほど！切替後に表示されるコンテンツをフェードインさせるということですかね？
      それではこちらも追々お伝えいたしますので、今しばらくお待ちください。

      返信

亜藍 へ返信する コメントをキャンセル

*