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

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

スポンサードリンク

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

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

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

CSSでデザインする

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

ソースコード

HTML

CSS

jQuery

 結果(動作サンプル)

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

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

解説

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

HTML

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

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

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

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

CSS

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

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

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

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

jQuery

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

.tabli要素をクリックしたら発動します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像で実装する

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

ソースコード

HTML

CSS

jQuery

 結果(動作サンプル)

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

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

解説

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

HTML

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

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

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

CSS

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

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

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

jQuery

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

.tabli要素をクリックしたら発動します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサードリンク

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

コメント

  1. 亜藍 より:

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

    1. flatFlag より:

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

コメントを残す

*