シンプルなタブメニューを作ってみる【メニューのクリック以外でタブを開く】

タブメニュー

タブメニューは、スクロールなしでコンテンツを切り替えて見せるためのUIです。最近では見る機会が減った気がしますが、案件的にそれなりにまだ需要も残っているので、シンプルに作ってみます。

デザインは本当にひどいですが、機能を見せたいだけなのでその辺は何も考えてません。

このタブメニューでできることは、以下のとおりです。

  • タブメニューをクリックすると、そのタブが開く
  • タブ内のリンクをクリックすると、そのタブが開く
  • 本ページのURLに「?tab=0」(0~3がそれぞれのタブに対応)とつけて本ページにアクセスし直すと、そのタブを開いた状態で初期表示される

普通のタブメニューとしての使い方と、タブどうしの遷移、あるいはURLで好きなタブを初期表示させることができます。また、最後の項目について、URLパラメータなし、あるいはtab属性なし、0~3以外のパラメータ値を渡した場合、デフォルトで一番左のタブが開きます。


HTML

HTMLはタブ全体を囲むdivと、その下にタブメニュー用のulタグ、同じ階層に各タブが並ぶという構成です。

タブどうしの遷移は「<a href="#" class="tab-open" data-tab-id="1">」のタグで行います。data-*属性を使って開くタブの番号を定義しています。

CSS

CSSのポイントは、タブメニューの後のclearfixを行うことと、選択中のタブをcurrentという適当なクラスで表現していることです。

javascript

javascriptのポイントは、タブを開く関数です。

「$('.tab-area .inner').eq(current)」のeq関数はjQueryの関数で、エレメントの集合のなかから、指定した要素のエレメントを取り出すものです。これにより、指定した番号のタブ部分を取得しています。

「$('.tab-area .inner').not(show_tab).hide();」では、指定した番号のタブ以外をhide()で非表示にしています。

次の「$('.tab-menu li').eq(current).find('a').addClass('current');」では、指定した番号のタブメニューを選択中の状態に切り替えるため、選択中を示すCSSプロパティをタブメニューに付与しています。

「$('.tab-area .inner').hide().eq($('.tab-menu a').index(this)).show();」は、いったんタブを全て非表示にした後、指定した番号のタブのみを表示にしています。「$('.tab-menu a').index(this)」のindex関数はjQueryの関数で、引数のエレメントのインデックス番号を返すものです。ここにthisを渡すことで、クリックされたタブメニューの番号を取得できます。これにより、指定した番号のタブのみを表示することができます。

あとは「$('.tab-menu a').removeClass('current');」と「$(this).addClass('current');」で選択中を示すCSSプロパティをクリックされたタブメニューに適用したら、タブメニューのクリック時の動作は完了です。

この関数の一番のポイントは、「filter(':eq('+current+')').click();」です。変数部分を定数にすると「filter(':eq(0)').click();」となります。

このfilter関数はjQueryの関数で、エレメントの集合から、引数に渡されたコールバック関数で合致と判定しなかった要素を全て削除したものを返すというものですが、言い換えると、引数に渡されたコールバック関数と合致したエレメントのみを返す、ということになります。この引数に渡している「:eq(0)」は、eq関数と動作は同じです。つまり、指定した番号のタブメニューを取得していることになります。

最後の「.click();」で、ブラウザ上でクリックをしていなくても、クリック時の処理を実行することができます。

あとは特に難しいところはないと思います。GETパラメータを取得する関数は、ネットにサンプルが転がっているので、それを参考にしました。

以上で終わりです。

広告
  • LINEで送る