【jQuery】タブパネルの実装とレイアウト

タブの選択によって表示内容を切り替えられるパネルをjQueryで実装します。

完成サンプル

こちらをクリック

– HTML –

– CSS –

クリックで切り替える部分がタブ(tab)
選択したタブによって切り替わる内容がパネル(panel)

 
タブとパネルをulタグで別々のリストとしている。
パネル内で箇条書きのリスト項目を表示するため、liタグ内でさらにulタグを入れ子にしている。

個別のパネルを示すliタグに#idをつけ、それぞれ対応するタブのaタグでリンク指定している。

一つめのタブにselectedクラスを指定している。

.tabのdisplayプロパティをflexとしタブを横並びにしている。
liタグのwidthを100%とすることでタブの数がいくつになっても幅が均等に割り振られる。

jQuery適用前の状態

jQueryを適用する

– JSファイル –

上記のスクリプトを細かく分けて解説したいと思います。

初期状態の設定

CSSだけでは先ほどの図のようにすべてのパネルが展開した状態ですので、選択したタブに対応するパネルのみ表示するようにします。

– スクリプトの2行目 –

パネルの子要素liタグに使われている否定擬似クラス:notの中を見ると、selectedクラスからattr(“href”)で属性、つまりパネルに指定された#idを取り出しています。
否定擬似クラスによって逆の意味となり、selectedクラスが付いているタブに指定されていない#idがついたliタグをhide()によって非表示にしています。

– 直下セレクタ > の使用について –
 
今回のサンプルではpanelに指定しているliタグの中にさらにulタグを入れ子にしています。
もし二行目を .panel li とした場合、入れ子にしているliタグもhide()の対象となってしまい、
何も表示されなくなってしまいます。
.panel > li:not とする事で直帰の子要素であるパネルのliタグのみを非表示の対象としています。

 
– スクリプトの3行目以降 –

タブがクリックされた際のclickイベントを設定する。

4行目:removeClassによって「.selected」クラスがついたタブから「.selected」を取り除く。
5行目:addClassによってクリックされたタブに「.selected」クラスを付ける。
6行目:すべてのパネルを一度非表示にする。
7行目:クリックされたaタグ(.selectedクラスが付いている)のhref属性の値を読み出して、値と同じ名前のid属性を持つパネルだけをshow()で表示している。
※ここでも直下セレクタを使っている。
 

Follow me!

【jQuery】タブパネルの実装とレイアウト” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください