今回は、jQueryでタブの切り替えパネルを作成！について、実際にサンプルコードを用いて、詳しく記載していこうと思います。
省スペース化できるUI「タブパネル」。タブ部分をクリックすると、それに対応した部分のパネルが表示される仕組みを、サンプルコードを交え記載していこうと思います。jQueryでタブパネルの作成ができると、限られたスペースで沢山の情報を盛り込むことができるので、とても便利な表現方法になることと思います。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
それではさっそく、完成形のjQueryによるタブの切り替えパネル！
マークアップのサンプルHTMLを記載してみます。
マークアップ上では、大きくふたつのブロックに分けています。まずはタブのラベルとなる部分を、li要素でマークアップ。さらにリストにはリンクを入れておきます。リンクはそれぞれ表示させたいパネルのIDを記述しておきます。また、初めから表示させておきたい部分には、li要素にactiveというクラスを付けてあります。
次にリストの下に、パネルとなるdiv要素（.panel）をマークアップ。このパネルに、それぞれIDを付けたdiv要素をマークアップしていきます。今回は3つのパネルを作成します。最後に全体を#tabというIDを付けたdivで囲みます。
ここではタブの仕組みを下記のように作ることを考えてみました。
・active以外のパネルを非表示にする。
・リンクをクリックしたら、開いているパネルを隠し、対応するパネルを表示。
・クリックされたリンクの親であるli要素に、activeというクラスを付ける。
上記がおおよその動作になります。
まずは初期状態として、active以外のパネルを非表示にしておきます。非表示にするにはhide()メソッドを利用します。
マークアップでは、activeというクラスがついているli要素です。一方非表示にしたいパネル部分はdiv要素になっています。つまり操作したい部分が同一の要素ではありません。このことに注意して、jQueryのコードを記載してみます。
まず、初期状態で表示させたままにしておきたいパネルのIDは、.activeの中のa要素のリンク先（href属性）にマークアップされています。なので1行目で、表示しておくパネルのIDを変数activePanelに代入しておきます。IDは①の$("#tab .active a").attr("href")で、簡単に取得することが可能です。
次にパネルを非表示にするコード②に付いて記載します。隠したいパネルは、activePanel以外のIDの付いたパネルになりますから、:not疑似クラスセレクタを利用します。セレクタの指定が、少し難しく感じるかもしれませんが、#tab .panel > divの部分はチャイルドセレクタ（直下の子要素のdiv）、+の部分は文字列の連結になります。実際には変数の値を参照して、下記のようになります。
これで.activeに対応したパネル以外を非表示にすることができます。
次に、クリックで切り替える仕組みを作ってみます。
それでは上から順番に、コードの説明を記載していきます。まずは全体を囲むようにclick()メソッドを記述します。イベントハンドラ内の①の部分は、li要素からactiveというクラスを削除しています。続く②では、hide()メソッドを使ってすべてのパネルを隠しています。
③のコードは、this（クリックされたa要素）の親要素であるli要素に、activeというクラスを付けています。activeを付ける要素はa要素ではなくli要素ですから、parent()メソッドを利用しています。
④の部分はセレクタが少し複雑になっていますが、整理してみると、$(this).attr("href")には、開きたいパネルのIDが入っているので、$($(this).attr("href"))として、対応するID部のパネルをshow()メソッドで表示しています。
⑤最後のreturn falseで、a要素の本来の機能（リンク先に移動）を無効化しています。
少し淡々と説明いたしましたが、MK-blog:jQueryを初めから読み進めていた人であれば、難しいコードではないと思います。今回のサンプルは、クリックされた要素と、実際に表示/非表示させたい要素を、ID属性とhref属性を使って関連付けています。隣接セレクタを使い関連付けける場合なども有りますが、今回のタブのように、ID属性とhref属性を利用して操作する手法も覚えておくと、とても便利です。
といことで今回は、jQueryでタブの切り替えパネルを作成！について、サンプルコードを交え記載いたしました。
稀にクライアントワークで、上記のようなパネル作成を依頼されることがございます。jQueryのコーディングに慣れてしまえば、何ら問題ございませんが、使いどころにはページの読み込みスピードの観点から、多少注意が必要になることと思いますが、これもホームページ作成における経験がものをいう所だと、個人的には思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
