jQuery入門講座サンプル-タブメニュー(3)

タブメニュー(3)

概要

タブメニューの完成

前回のサンプルでは、最初に全てのコンテンツが表示されたままになっていました。今回はそれを修正してタブメニューを完成させます。

解説

特定のイベントを実行するtrigger（トリガー）メソッド

前回のサンプル（tab2/05.html）は「最初だけ」コンテンツが全て表示されてしまっていますが、1回でも「タブをクリックすれば問題はなくなります」。ですので、問題を回避するためにはユーザーがクリックするのを待たずjQueryで機械的にタブをクリックします。

トリッキーな対応に思えるかもしれませんが、意外と一般的なテクニックで、jQueryでもメソッドが用意されています。サンプル（tab3/01.html）を開いて下さい。コンテンツがtab_1のコンテンツだけが表示され、問題が回避されていることを確認できます。

次にソースを開いてhtmlに変更がないことを確認して下さい。jQueryは以下のようにtriggerメソッドの1行が追加されているだけです。この処理で機械的に「tab_1」をクリックしているため、最初にtab_1のコンテンツだけが表示されるのです。

$("#tab_1").trigger("click");

triggerメソッドを利用する上で注意するのは「順番」です。triggerメソッドは設定されたイベントを実行するので、イベントを設定した後に書かなければなりません。イベントを設定する前にtriggerメソッドを実行するサンプル（tab3/01b.html）を用意したので確認して下さい。

jQueryは以下の様にclickイベントを設定（2行目）する前にtriggerメソッドでクリックを実行しています。clickイベントを設定する前にクリックすることはできないので、結果として正しく機能せず、すべてのコンテンツが表示されたままです。

$("#tab_1").trigger("click");
$("ul").on("click", "li",function() {

triggerメソッドを利用する際は、イベントを設定した後で実行するようにして下さい。

タブメニューの完成

前項のサンプル（tab3/01.html）で完成に思うかもしれませんが、余分な処理があるので最後にそれを削除します。これまでのサンプルでは以下の様に最初に選択状態にしたいタブにselectのクラス属性を設定していました。

<li id="tab_1" class="selected">tab_1</li>
<li id="tab_2">tab_2</li>
<li id="tab_3">tab_3</li>

しかし前項でtriggerメソッドを利用してtab_1をクリックしているので、htmlに直接selectを設定する必要はなくなります。サンプル（tab3/02.html）のソースを開いてhtmlを確認して下さい。selectのclass属性が外されています。しかしクリックの処理でselectのclass属性を設定しているため、問題なく機能しています。

これで完成です。もし最初に他のコンテンツを表示したい場合は、triggerメソッドで他のタブをクリックすればOKです。サンプル（tab3/02b.html）を開いて、最初にtab_3のコンテンツが表示されていることを確認して下さい。jQueryでtriggerメソッドの部分を以下の様に変更しているだけです。

$("#tab_3").trigger("click");

これでタブメニューは完成です。次回はタブの背景色に合わせてコンテンツエリアの背景色を変更するサンプルを紹介します。

次のページ：タブメニュー(4)