初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：短編集
2章：診断系コンテンツ
3章：製品抽出系コンテンツ
番外：Simulation Game

タブメニュー(2)

概要

コンテンツエリアの追加

タブメニューは選択した他部に合わせて表示するコンテンツを切り替えます。ここではコンテンツエリアの処理とcssについて説明していきます。

解説

htmlとcssの確認

まずはコンテンツエリアのhtmlとcssを確認します。サンプル（tab2/01.html）のソースを開き、body内に以下のdiv要素が追加されているのを確認して下さい。外側のdiv要素だけにid属性textAreaが設定されています。 

<div id="textArea">
	<div>tab_1のコンテンツ</div>
	<div>tab_2のコンテンツ</div>
	<div>tab_3のコンテンツ</div>
</div>

cssは以下の様に設定され、まだ特筆すべき点はありません。 

#textArea{
	clear:left;
	width:600px;
	height:100px;
	margin:0px 10px 10px 10px;
	padding:10px;
	border: 1px #ddd solid;
}

デザイン的に問題なのは左図の赤枠部分です。選択されたタブはコンテンツ部分と融合して欲しいので、この境界部分を消すようにしましょう。

境界線の削除

まず簡単に対応できるタブのcss変更から確認します。サンプル（tab2/02.html）のソースを開き、css設定の「ul li」から既存のborder処理が削除され、代わりに以下の処理が追加されていることを確認して下さい。 

border-top: 1px #ddd solid;
border-left: 1px #ddd solid;
border-right: 1px #ddd solid;

この処理によってタブの下のボーダーだけ削除できます。しかしコンテンツエリアのボーダーがまだ残っています。デザインによっては、このボーダーがあっても良いのですが今回は消すようにしましょう。

しかしボーダーの途中だけを消すことはできないので、少し強引な方法を使います。それはコンテンツエリアを1pxだけ上に移動しタブの背後に隠すことです。サンプル（tab2/03.html）を開きタブとの境界線が無くなっていることを確認して下さい。

ではソースを開いて、#textAreaのcss設定に以下の3行が追加されていることを確認して下さい。まず位置を変更できるようにposition属性をrelativeに設定し、top属性で-1px上に移動しています。このときタブの後に重ねたいのでz-indexは-1を指定します。IE10のメトロ版では画面サイズに合わせてサイトが拡大縮小されるため、画面描画がサブピクセルでレンダリングされます。そのため微妙にタブが重なりません...。 

position:relative;
top:-1px;
z-index:-1;

とりあえず、これでhtmlとcssの設定は終わりです。次項ではjQueryを追加してタブに合わせてコンテンツも切り替わるようにしていきます。

どのタブがクリックされたか取得

タブだけであればthisを利用すれば良いのですが、それではコンテンツエリアを切り替えることはできません。切り替えるためには「タブに名前」を付ける必要があります。サンプル（tab2/04.html）のソースを開きbody内の構成を確認して下さい。以下の様にタブとコンテンツにidを付けました。このときのポイントが対応するタブとコンテンツで数字の部分が同じになるようにすることです（tab_1とtext_1といったように）。 

<ul>
	<li id="tab_1" class="selected">tab_1</li>
	<li id="tab_2">tab_2</li>
	<li id="tab_3">tab_3</li>
</ul>
<div id="textArea">
	<div id="text_1">tab_1のコンテンツ</div>
	<div id="text_2">tab_2のコンテンツ</div>
	<div id="text_3">tab_3のコンテンツ</div>
</div>

続いてjQueryを確認して、クリックした時の処理に以下の2行が追加されていることを確認して下さい。使い方「thisについて(2)」で説明したように「this.id」でクリックされた要素のid属性の値を取得できます。サンプルでは取得した結果をアラートで表示するようにしたので、タブをクリックするとid属性の値が表示されます。 

myID = this.id;
alert(myID);

しかしタブとコンテンツのidの共通点は数字だけなので「tab_」の部分は邪魔になります。ですのでjavaScriptのsplitメソッドを利用して数字部分だけを取り出します。サンプル（tab2/04b.html）のソースを開いて、以下の様にid属性の取得が変更されていることを確認して下さい。 

myID = this.id.split("_")[1];
alert(myID);

これでid属性から「tab_」の部分が除かれ数値だけを取得できます。実際にタブをクリックすると数値だけがアラートで表示されます。この値を利用して表示するコンテンツを指定します。

コンテンツの表示

コンテンツの表示は以下の様に作成します。タブよりもシンプルな考え方だと思います。

コンテンツ表示の実現方法
全てのコンテンツを隠す
↓
選択されたタブのコンテンツだけ表示する

サンプル（tab2/05.html）のソースを開き、myIDの取得の下に2行追加されていることを確認して下さい。 

myID = this.id.split("_")[1];
$("#textArea>div").hide();
$("#text_" + myID).show();

まず2行目ではセレクタ：>（子要素）を利用してid属性textAreaの要素内にあるdiv要素をすべて隠します。隠すのにはhideメソッドを利用します。3行目では取得したタブのid「myID」の前に「#text_」を足して、タブに対応するコンテンツを選択します（id属性を指す「#」を最初に付けることを忘れずに）。そしてshowメソッドを利用して表示します。

これでクリックしたタブに対応するコンテンツだけが表示されます。さて、完成したように見えますが、最初は全てのコンテンツが表示されてしまっています。次回はそれを修正してタブメニューを完成させます。