【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法

表題の通り、タブ風のボタンを作成し、ボタンをクリックでコンテンツの内容を
表示・非表示と切り替える方法をサンプルコード付きで解説します。

今回のタブ風のボタンでは、選択状態となっているタブに色をつけ、
他のタブを未選択状態の状態とし、選択されたタブと対になっている
コンテンツを表示させます。

タブの種類は何個でも可能ですので、用途によってカスタマイズしてください。
基本的なレイアウトはCSSとHTMLにて行い、コンテンツやタブの選択状態を切り替えるのに
簡単なjQueryを使用しています。

勿論、jQueryの部分はネイティブのJavaScriptを使用しても問題ありません。
ちょっとしたフェード効果をつけるのに、jQueryでは楽でしたので、
今回のデモにて使用させて頂きましたが、
基本的な処理ロジック、考え方は簡単ですので、使い慣れたクライアントプログラミングにて
実装して下さい。

タブ風のボタンを作成しよう

まずはタブ風のボタンを作成しましょう。
作り方は多種多様ですが、今回はDIVをボタンとして扱い、
CSS3の『radius』にて上半分のみ角丸にし、
作成したタブのボタン郡をDIVで囲んで下方にタブの境界線を敷きます。
見た目の完成図は下記の様な状態です。

それでは上記の様なタブを作成する為のHTMLから記述しましょう。
HTMLのDIVの入れ子状態は下記の通りです。



タブ風のボタン1

タブ風のボタン2

今回はタブボタンを二つ作成しますが、同じ様に中のDIVを増やしていけば
タブは三つ、四つと増やす事が可能です。
用途によって最適なタブ数にて作成してください。

それではタブ風のボタンと見れる様に、デザインを載せていきましょう。
まずは、全てのタブを囲んだDIVのスタイル。
そして基本的なタブのボタンのスタイル。
そして選択状態となったタブのスタイルを定義します。

スタイル用のクラスを乗せたHTMLは下記の通りです。



タブ風のボタン1

タブ風のボタン2

『class="tabarea"』ではタブ全体の位置関係や、
タブが飛び出している境界線（下部の線）を定義します。

/* タブ領域
-------------------------------------------------------------------------------*/
.tabarea
{
 border-bottom:solid 5px #60a917;
 text-align:center;
}

続いて、通常のタブ（タブ未選択状態）のデザインをクラス『tabbutton』として
設定しましょう。

未選択状態のタブのスタイルを定義しよう。

HTML構造については前章で解説致しましたので、
実際にタブボタンを作成するにあたり、必要となる
ボタンのスタイルの定義について解説します。

まずは、今回のサンプルとなるスタイルをご覧下さい。

/* 未選択のタブ
-------------------------------------------------------------------------------*/
.tabbutton
{
 width:350px;
 text-align:center;
 font-weight:bold;
 color:#60a917;
 padding:10px;

 margin-left:1px;
 margin-right:1px;

 display: inline-block;

 background-color:#ffffff;
 border:solid 1px #60a917;

 -moz-border-radius-topleft: 15px;
 -moz-border-radius-topright:15px;
 -webkit-border-top-left-radius:15px;
 -webkit-border-top-right-radius:15px;
 border-top-left-radius:15px;
 border-top-right-radius:15px;
}

.tabbutton:active
{
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 filter: alpha(opacity=70);
 -moz-opacity:0.7;
 -khtml-opacity: 0.7;
 opacity: 0.7;
}

タブのサイズや文字の太さ、色、マージン等の位置や基本的名ボタンのスタイルに加え、
DIVを横に並べる為に表示スタイルを『display: inline-block;』としています。
『display:inline-block;』は、大きさという概念を持ったブロック要素を、
インライン要素として扱う為のスタイルです。
『display: inline-block;』を使用するだけで、画像を横に並べる様な感覚で使用出来ます。

その関係で、タブを囲んでいるDIVのクラス『tabarea』では『text-align:center;』にて、
タブの位置関係を中央寄せとしています。

そして、『radius』にて上半分にのみ角丸を適用してタブを演出しています。
背景は実選択状態を表す用に、今回は白としていますが、
こちらはデザインによって指定して下さい。
ただ、タブの様に見せる為に、『border』の色と、
タブを囲んでいるDIVのクラス『tabarea』で指定した『border-bottom』の色は合わせた方が、
よりタブとして見せる事が出来ますので、特別なデザイン戦略が無い場合は
色を合わせておく方が無難でしょう。

後は、クリックした時にクリックされた事が分かるように『tabbutton:active』を指定しています。
内容は、少し透明にする為の方法を各ブラウザ毎の書き方として用意しました。

これで、クリックすると少し薄くなる未選択状態のタブが完成です。

選択状態のタブを作成しよう。

続いて、選択状態のタブのスタイルについて解説します。
大まかには未選択の状態と変わりません。
文字の色や、背景色が変わった程度でしょうか。
異なる部分だけ指定する様にして、
重複部分は纏めてしまうのがスマートかも知れませんが、
今回は後のJavaScriptにて一気に変更させる時に分かりやすいので、
あえて重複部分も記述しています。

また、デザインによっては重複ではなく、オリジナルスタイルとなりますので、
そのまま下記のスタイルをカスタマイズしてお使い頂ければ幸いです。

/* 選択中のタブ
-------------------------------------------------------------------------------*/
.tabbutton-selected
{
 width:350px;
 text-align:center;
 font-weight:bold;
 color:#ffffff;
 padding:10px;

 margin-left:1px;
 margin-right:1px;

 display: inline-block;

 background-color:#60a917;
 border:solid 1px #60a917;
 -moz-border-radius-topleft: 15px;
 -moz-border-radius-topright:15px;
 -webkit-border-top-left-radius:15px;
 -webkit-border-top-right-radius:15px;
 border-top-left-radius:15px;
 border-top-right-radius:15px;
}

.tabbutton-selected:active
{
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 filter: alpha(opacity=70);
 -moz-opacity:0.7;
 -khtml-opacity: 0.7;
 opacity: 0.7;
}

今回はシンプルに、CSSのスタイルにてボタンを作成しましたが、
よりリアルなタブにする場合は画像を使用しても良いでしょう。

基本的なHTML構造と、選択・未選択状態を判別できるクラス構造であれば
デザインは問いません。是非とも素晴らしいタブを作成して下さいね。

タブ選択で表示されるコンテンツを用意しよう。

次はタブ選択により表示されるコンテンツを定義しましょう。
具体的には下記の様なHTMLを記述します。


タブ１の内容です


タブ２の内容です

今回は、タブ選択により表示させる内容はDIVに纏める事にしました。
初期状態で表示させないものは、『display:none;』にて非表示にしておきましょう。
そして、タブと対になる項目毎にIDを振り、
それらがタブと対になっている事を示す為に、
それぞれにクラスとして『tabgroup』と設定します。
後は、同じ法則の元DIVをタブの数まで増やす事で
タブのコンテンツを増やしていけます。

勿論、上記HTMLのDIVの中を作りこんでも大丈夫です。
むしろ、実際のページ丸々を構築する事が殆どでしょう。

また、要素はDIV以外でも問題ありません。
中には『section』で作りたい方も多いでしょう。

基本的に、タブと対になるコンテンツを囲む要素を用意して、
そこへIDと、タブ制御が入る事を示すためのクラスを定義する。
初期状態で表示しないものは『display:none;』で非表示にしておく。

これらを守れば、要素や作りは問いません。

タブ選択イベントとコンテンツ切り替え処理を実装しよう。

タブが選択された時に起動させるJavaScriptを実装します。
タブの選択状態の切り替えや、対になるコンテンツの表示、
不用となったコンテンツの非表示処理等を行います。
まずはサンプルコードをご覧下さい。

/* タブの切り替え
-------------------------------------------------------------------------------*/
function selectedTab( tab_, show_id_ )
{
 // 選択状態のタブを未選択状態にする
 $( ".tabbutton-selected" ).attr("class","tabbutton");

 // 選択されたタブを選択状態へする
 $( tab_ ).attr("class","tabbutton-selected");

 // タブ関連のコンテンツを非表示にする
 $( ".tabgroup" ).css("display","none");

 // 指定されたコンテンツをフェードインさせる
 $( "#"+show_id_ ).fadeIn("farst");
}

引数として、
第一引数には選択されたタブ自体を受け取り、
第二引数には選択されたタブと対になるコンテンツのIDを受け取ります。

サンプルコードのコメントにも書かせて頂きましたが、
まずは選択状態のタブを未選択状態へ変更します。

これには、jQueryの『attr()』にてアトリビュートの『class』の内容を書き換える事で対応します。
セレクタでは、選択状態のスタイルが指定されたタブを指定し、
未選択状態のスタイルを定義したクラスを適用します。

続いて、引数にて渡されて来た、正に今選択されたタブに対して、
選択状態を表すスタイルを『attr()』にてクラス指定する事で、選択状態のスタイルを
適用させます。

タブのコンテンツには、全て『tabgroup』というクラスを定義していましたので、
『tabgroup』のクラスが定義されたもの全てに対して
CSSで『display:none;』を適用させて非表示にします。
全て非表示にした上で、引数に与えられて来たコンテンツのIDの要素を
フェードインにて表示させます。

これでタブによるコンテンツの切り替えが実装出来ます。

では、実際に上記のJavaScriptを呼び出す処理を実装しましょう。
単純なクリック判定ですので、今回は『onClick』を使いたいと思います。



タブ風のボタン1

タブ風のボタン2

作成したタブのボタン自体に『onClick』イベントとして、
先程作成した『selectedTab()』を指定しています。

勿論、HTMLにイベントを記述せずに外部定義にて書くのも問題ありません。
他のソースとの兼ね合い、コーディングルール、保守性によって
最適な方法を選択して下さい。

上記サンプルコードを見て取れるとおり、『selectedTab()』の第一引数には
タブボタン自身を表す『this』を渡しており、第二引数には
対となるコンテンツのIDを指定します。

これで、簡単なタブ切り替え処理の完成です。

今回の様なタブ切り替え処理は、限られたコンテンツ領域を効率的に使う事が出来、
UI的にも分かりやすく、ちょっとした切り替えアニメーションも
見せられるので、とても使い勝手が良いです。

タブ切り替え処理は、色んな所で使えますので、
こういったテクニックは頭の片隅に置いておいて頂ければ幸いです。

是非ともオリジナリティ溢れるタブを実装してくださいね。

【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法