jQueryのタブメニューボックス/コンテンツ表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Tabs</title>
    <style type="text/css" media="screen">
    <!--
                BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
                H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
                DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}

                ul.tabNavigation {
                    list-style: none;
                    margin: 0;
                    padding: 0;
					height:25px;
                }

                UL.tabNavigation LI {
                    width:70px;
					float:left;
                }

                UL.tabNavigation LI A {
                    padding: 3px 5px;
                    background-color: #ccc;
                    color: #000;
                    text-decoration: none;
					display:block;
					text-align:center;
                }

                UL.tabNavigation LI A.selected,
                UL.tabNavigation LI A:hover {
                    background-color: #333;
                    color: #fff;
                }
                
                UL.tabNavigation LI A:focus {
                        outline: 0;
                }

                div.tabs div {
                        padding: 5px;
                        margin-top: 3px;
                        border: 5px solid #333;
                }
                
                div.tabs > div h2 {
                        margin-top: 0;
                }

                #first {
                    background-color:#FFCC66;
                }

                #second {
                    background-color:#99CC99;
                }

                #third {
                    background-color:#BFEBFB;
                }
                
                .waste {
                        min-height: 1000px;
                }
    -->
    </style>

        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
                $(function () {
                        var tabContainers = $('div.tabs div');
                        tabContainers.hide().filter(':first').show();
                        
                        $('div.tabs ul.tabNavigation a').click(function () {
                                tabContainers.hide();
                                tabContainers.filter(this.hash).show();
                                $('div.tabs ul.tabNavigation a').removeClass('selected');
                                $(this).addClass('selected');
                                return false;
                        }).filter(':first').click();
                });
        </script>
</head>
<body>
    <div class="tabs">
        <ul class="tabNavigation">
            <li><a href="#first">First</a></li>
            <li><a href="#second">Second</a></li>
            <li><a href="#third">Third</a></li>
        </ul>
        <div id="first">
            <h2>First Box</h2>
            <p>ここにコンテンツを表示する</p>
        </div>
        <div id="second">

            <h2>Second Box</h2>
            <p>ここにコンテンツを表示する</p>
        </div>
        <div id="third">
            <h2>Third Box</h2>
            <p>ここにコンテンツを表示する</p>
        </div>
    </div>
  </body>
</html>

	jQuery Tabs

jQueryのタブボックス。
動作はシンプルかつ軽快です。
サイトにjQueryを入れているのなら、こちらを利用してタブメニューを作成してはいかがでしょうか。

セッティング

１．ダウンロード/セッティング

使用するスクリプトはjQueryなので、こちらからダウンロードしてきてください。
それをアップしたら、以下のようにページヘッダーに読み込ませます。

パスを調整し、jquery-1.3.2.min.jsのファイル名もリネームしても良いかと思います。

２．<head>内の設定

以下のように書き込みます。

ここでポイントなのは、まずdi,tabs div で、タブパネルを指定しているところ。
次に、 div.tabs ul.tabNavigation a でタブパネルの切り替えメニューを指定しているところ。
最後に、一番最後にある div.tabs ul.tabNavigation a　でそのタブがセレクトされている時の切り替えメニューに"selected"というクラスを付加する指定をしている箇所です。
最初はまるごとコピペして動作を確認し、それぞれのターゲットを調節するといいかと思います。

３．HTML要素のマークアップ

順番どおりに記述していきますと

これでタブボックス全体の範囲を指定。次に

<div class="tabs">
   <ul class="tabNavigation">
   <li><a href="#first">First</a></li>
   <li><a href="#second">Second</a></li>
   <li><a href="#third">Third</a></li>
   </ul>

</div>　

ulにclass="tabNavigation"を付加し、タブの切り替えメニューとしています。
liのhrefのターゲットは、この後に記述するタブパネルのIDです。

<div class="tabs">
   <ul class="tabNavigation">
   <li><a href="#first">First</a></li>
   <li><a href="#second">Second</a></li>
   <li><a href="#third">Third</a></li>
   </ul>
   <div id="first">
   <h2>First Box</h2>
   <p>ここにコンテンツを表示する</p>
   </div>
   <div id="second">
   <h2>Second Box</h2>
   <p>ここにコンテンツを表示する</p>
   </div>
   <div id="third">
   <h2>Third Box</h2>
   <p>ここにコンテンツを表示する</p>
   </div>

   </div>　