デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

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

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 で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン