ロボット研究開発、ソフトウェア開発、コンテンツ制作配信

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

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

スポンサーリンク

タブパネルとは?

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

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

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

タブパネルを実装する

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

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

jQueryでのスクリプトは以下のように記述します。

最初は、タブパネルの初期表示状態を設定します。id属性に[#tab1]が付いたパネル以外がhide()で非表示になります。(4行目)
タブがクリックされたときは、[selected]が付いたタブから[selected]を一旦取り除き、クリックされたタブにだけ[selected]を付け直します。(7,8行目)
次にすべてのパネルを一旦hide()で非表示にし、選択されたパネルだけshow()で再表示します。
これでタブパネルが完成です。

最後に

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

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

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

CAPTCHA


ページトップボタン