タブパネルをつくってみた

jQueryを使って、タブパネルを作ってみました。
備忘録として残しておきます。

タブパネルとは？

タブパネルは、タブ（見出し）をクリックすると、パネル（タブの内容が書かれた部分）が切り替わるUIです。アコーディオンパネルと同じく、情報量に対して表示スペースが少ない場合に使われます。Yahoo!やlivedoorなどの大手ポータルサイトがトップページで採用していることもあり、現在では、多くのユーザーが迷わず操作できるUIとして定着しています。

今回は、以下のようなタブパネルを作成しました。
タブをクリックするとパネルの表示が切り替わります。

• タブ1
• タブ2
• タブ3

• tab1　タブパネル　テスト１です。
• tab2　タブパネル　テスト２です。
• tab3　タブパネル　テスト3です。

タブパネルを実装する

早速、実装方法をご紹介します。
まずは、タブパネルの下地を作ります。
以下のように、タブ（見出し）とパネル（表示する中身）をそれぞれ別々のul/li要素で記述します。

<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　タブパネル　テスト１です。
</li>
<li id="tab2">
tab2　タブパネル　テスト２です。
</li>
<li id="tab3">
tab3　タブパネル　テスト3です。
</li>
</ul>

CSSは、以下のように記述します。
タブ部分（ul.tab li)はfloatを利用して横一列に並べます。
（注：レイアウトの指定は、それぞれのサイトで調整が必要です）

/* タブパネル */
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でのスクリプトは以下のように記述します。

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()で非表示になります。（４行目)
タブがクリックされたときは、[selected]が付いたタブから[selected]を一旦取り除き、クリックされたタブにだけ[selected]を付け直します。（7,8行目）
次にすべてのパネルを一旦hide()で非表示にし、選択されたパネルだけshow()で再表示します。
これでタブパネルが完成です。

最後に

以上、jQueryでのタブパネルの作成方法を紹介しました。
少しでも参考になれば幸いです。