タブパネルをつくってみた
jQueryを使って、タブパネルを作ってみました。
備忘録として残しておきます。
タブパネルとは?
タブパネルは、タブ(見出し)をクリックすると、パネル(タブの内容が書かれた部分)が切り替わるUIです。アコーディオンパネルと同じく、情報量に対して表示スペースが少ない場合に使われます。Yahoo!やlivedoorなどの大手ポータルサイトがトップページで採用していることもあり、現在では、多くのユーザーが迷わず操作できるUIとして定着しています。
今回は、以下のようなタブパネルを作成しました。
タブをクリックするとパネルの表示が切り替わります。
- tab1 タブパネル テスト1です。
- tab2 タブパネル テスト2です。
- tab3 タブパネル テスト3です。
タブパネルを実装する
早速、実装方法をご紹介します。
まずは、タブパネルの下地を作ります。
以下のように、タブ(見出し)とパネル(表示する中身)をそれぞれ別々のul/li要素で記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul class="tab"> <li><a href="#tab1" class="selected">タブ1</a></li> <li><a href="#tab2">タブ2</a></li> <li><a href="#tab3">タブ3</a></li> </ul> <ul class="panel"> <li id="tab1"> tab1 タブパネル テスト1です。 </li> <li id="tab2"> tab2 タブパネル テスト2です。 </li> <li id="tab3"> tab3 タブパネル テスト3です。 </li> </ul> |
CSSは、以下のように記述します。
タブ部分(ul.tab li)はfloatを利用して横一列に並べます。
(注:レイアウトの指定は、それぞれのサイトで調整が必要です)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/* タブパネル */ ul.tab{ padding: 0; } ul.tab li{ list-style-type: none; width: 214.6px; height: 40px; border: 1px solid #9fB7D4; float: left; } ul.tab li a{ outline: none; background-color: #f0f8ff; display: block; color: blue; line-height: 40px; text-align: center; } ul.tab li a.selected { background-color: #e6e6fa; text-decoration: none; color: #333; cursor: default; } ul.panel{ clear: both; border: 1px solid #9fB7D4; padding: 0; } ul.panel li{ list-style-type: none; padding: 10px; color: #333; } |
jQueryでのスクリプトは以下のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery(function(){ /* タブパネル */ jQuery("ul.panel li:not("+jQuery("ul.tab li a.selected").attr("href")+")").hide(); jQuery("ul.tab li a").click(function(){ jQuery("ul.tab li a.selected").removeClass("selected"); jQuery(this).addClass("selected"); jQuery("ul.panel li").hide(); jQuery(jQuery(this).attr("href")).show(); return false; }); }); |
最初は、タブパネルの初期表示状態を設定します。id属性に[#tab1]が付いたパネル以外がhide()で非表示になります。(4行目)
タブがクリックされたときは、[selected]が付いたタブから[selected]を一旦取り除き、クリックされたタブにだけ[selected]を付け直します。(7,8行目)
次にすべてのパネルを一旦hide()で非表示にし、選択されたパネルだけshow()で再表示します。
これでタブパネルが完成です。
最後に
以上、jQueryでのタブパネルの作成方法を紹介しました。
少しでも参考になれば幸いです。
スポンサーリンク