CSSの書き方も分かるjQueryプラグイン実践活用法
連載インデックスへ
CSSの書き方も分かるjQueryプラグイン実践活用法（3）

jQuery 1.4の新機能8選＋Tabsプラグインでタブ表示

葛西 秋雄
2010/2/12

4ステップでjQueryのタブ型メニューを自作

□ ステップ1：CSSとライブラリを取り込む

　エディタを起動して新規ファイルを作成したら、<head>要素に<link>要素と<script>要素を追加してCSSとjQuery 1.3.2のライブラリを組み込みます。 

<head>
  <link href="css/base.css" rel="stylesheet" type="text/css" />……【1】
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>……【2】
</head>
- PR -
  1. サンプルの基本スタイルが宣言されている
  2. jQuery 1.3.2のライブラリをCDN経由で取り込む

□ ステップ2：XHTMLで骨格をデザイン

　<body>要素に<ul.tabs>要素を追加したら、<li>要素と<a>要素を入れ子にして「Red」「Green」「Blue」「Yellow」のタブを定義します。タブをアクティブ（選択された状態）にするには、<li>要素にclass属性を追加して「active」を設定します。ここでは、「Red」タブをアクティブにしています。<a>要素のhref属性には、コンテンツが定義されている<div>要素のidに「#red」を設定します。

<ul class="tabs">
  <li class="active"><a href="#red">Red</a></li>
  <li><a href="#green">Green</a></li>
  <li><a href="#blue">Blue</a></li>
  <li><a href="#yellow">Yellow</a></li>
</ul>

　<body>要素に<div.tab_container>要素を追加したら<div#red>要素を入れ子にして「Red」タブのコンテンツを定義します。同様の手順で「Green」「Blue」「Yellow」のコンテンツを定義します。 

<div class="tab_container">
  <div id="red" class="tab_content">
    <h2>Red</h2>
    <a href="#"><img src="css/images/boxRed.png" alt="" /></a>
    <p>
      Lorem ipsum qui scripta repudiare definiebas et, ・・・
    </p>
  </div>
</div>

□ ステップ3：タブのスタイルを定義

　ここでは、スタイルシートでボーダーのどの線を引いているのか識別できるように便宜的にボーダーの色を変えています。本番では、同じ色を使用します。

図4　見出しに表示するイメージを3種類用意する
図4　便宜的にボーダーの色を変えてタブを表示したところ

　ul.tabsのスタイルでは、赤のボーダー（ボックスの左と下の部分）を作成します。ul.tabs liのスタイルでは、青のボーダー（ボックスの上、右、下の部分）を作成します。ul.tabs li.activeのスタイルでは、緑のボーダー（アクティブなボックスの下の部分）を作成します。div.tab.containerのスタイルでは、オレンジのボーダー（ボックスの左と右の部分）を作成します。

　アクティブなタブとコンテンツを結合させるには、li.activeのborder-bottomプロパティの色「green」を背景色と同じ色「white」にします。

ul.tabs{
  border-bottom: 1px solid red;   /* ボックスの左線を引く */
  border-left: 1px solid red;     /* ボックスの下線を引く */
}
ul.tabs li{
  border: 1px solid blue;         /* ボックスの上、下、右線を引く */
  border-left: none;              /* ボックスの左線を引かない */
}
ul.tabs li.active{ 
  border-bottom: 1px solid green; /* アクティブなボックスの下線を引く */
  /* この線を背景色と同じ色にするとタブとコンテンツが結合した状態になる */
}
div.tab_container{
  border: 1px solid orange;      /* ボックスの左、右線を引く */
}

　ボックス下の青と赤の線が1pxほどずれているので、ul.tabsとul.tabs liに次のようなスタイルを適用して、水平になるように調整します。

ul.tabs{
  height: 32px;                   /* タブの高さを設定を32pxに設定 */
}
ul.tabs li{
  height: 31px;                   /* タブの高さから1px分少なくする */
  margin-bottom: -1px;            /* 下のボーダーを1px分調整する */
}

□ ステップ4：jQueryのAPIを追加する

　<head>要素に<script>要素を追加したら、次のようなコードを追加します。ここでは、<li>要素にクリック時のイベントを登録しています。このイベントハンドラでは、カレントのタブをアクティブにして対応するコンテンツを表示します。

<script type="text/javascript">
  $(function() {
      // 2番目以降のコンテンツを非表示にする
      $('.tab_content:not(:first)').hide(); 
  
      // li要素にクリックイベントを登録
      $('ul.tabs li').click(function() {
  
          // li要素からCSSクラス「active」を削除
          $('ul.tabs li').removeClass('active'); 
          // カレントのli要素にCSSクラス「active」を追加する
          $(this).addClass('active');
          // すべてのコンテンツを非表示にする
          $('.tab_content').hide();
          // カレントタブのコンテンツを表示
          var activeTab = $(this).children('a').attr('href'); 
          $(activeTab).fadeIn(); 
          return false;
      });
  });
</script>

　Webブラウザを起動してサンプルを表示すると、「Red」タブがアクティブの状態で表示されます。「Green」タブをクリックすると、「Green」タブがアクティブになりコンテンツが切り替わります。

図5　Webブラウザに自作のタブを表示したところ
図5　Webブラウザに自作のタブを表示したところ（画像をクリックすると、実際にサンプルが試せます）

自作のタブ型メニューを、さらにカスタマイズ

□ デフォルトで2番目の「Green」タブをアクティブにするには

　次のようにコードを書き換えます。

$('.tab_content').hide(); 
$('ul.tabs li:eq(1)').addClass('active');
$('.tab_content:eq(1)').show();

□ タブをクリックする代わりにマウスオーバーでタブをアクティブにするには

　click()イベントの代わりにhover()イベントを使用します。マウスオーバーでタブを繰るときは、fadeIn()メソッドにスピード「800」を設定してアニメーション化すると効果があります。

$('ul.tabs li').hover(
    function() { // mouse overの処理
        $('ul.tabs li').removeClass('active');
        $(this).addClass('active');
        $('.tab_content').hide();
        var activeTab = $(this).children('a').attr('href');
        $(activeTab).fadeIn(800);
    },
    function() { // mouse outの処理
        $('ul.tabs li').removeClass('active');
        $('.tab_content').hide();
});

　今回使ったサンプルは、こちらよりダウンロードできます。

■ ＠IT関連記事

ざっくり覚えて始められるjQueryセレクタ入門
デザイナーのためのWeb学習帳（4）　現在大流行中のjQuery。CSSセレクタのように使えるらしいけど、実際どうなの？ というデザイナのために、その基本をざっくり紹介
jQueryで学ぶ簡単で効果的なAjaxの使い方
いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ／プロデューサーも必見！
jQuery逆引きリファレンス
やりたいことからコードが見つかるjQuery辞典。まずはセレクタ構文に関する「ＸＸするには？」を24本一挙公開。jQueryは.NETでも公式サポート
「Insider.NET」フォーラム
ようこそJavaScriptの世界へ
初心者のためのJavaScript入門（1）　JavaScriptで本格的なプログラミングの世界へ。実用的なアプリケーションを作れるようになるまで
「Coding Edge」フォーラム 2009/11/18
DOMの基本を学ぼう
DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある
いまさら聞けないCSS／スタイルシート入門
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？
「デザインハック」コーナー

  著者プロフィール
葛西 秋雄

中小企業などの情報化推進の相談を受けるかたわら、Access、SQL Server、OracleなどのデータベースとWebアプリケーションの書籍執筆を手掛ける。
マイクロソフトのVisual Developer - ASP/ASP.NETのMVPとして著者Webサイトで活躍中。
主な著者：「CSS + jQuery Webデザインテクニック」（ビー・エヌ・エヌ新社）
「jQuery+JavaScript実践リファレンス―Webデザインを強化するための」（ソシム）
「ASP.NET 3.5+jQuery Ajax実践サンプル集」（秀和システム）

3/3  

　INDEX
CSSの書き方も分かるjQueryプラグイン実践活用法（3）　
jQuery 1.4の新機能8選＋Tabsプラグインでタブ表示
  Page1
jQuery 1.4リリース！ 1年ぶりのバージョンアップ
jQuery 1.4の主な新機能、8選！
  Page2
jQuery UIのTabsプラグインを使ってみる
ほかのプラグインを組み合わせてTabsをカスタマイズ
Page3
4ステップでjQueryのタブ型メニューを自作
自作のタブ型メニューを、さらにカスタマイズ

CSSの書き方も分かるjQueryプラグイン実践活用法 バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH