タブを利用してコンテンツを表示させる。

2015年8月3日

ページを遷移させず複数のコンテンツを
表示させたい場合使用します。

必要な手順

１．jQueryUIというものを入手する。

公式サイトは以下です。
http://jqueryui.com/download

tabだけをダウンロードしたい場合、
「deselect ALL components」をクリックしてから
「Tabs」をクリックします。

テーマはなんでも大丈夫です。

２．jQueryUIを使う。

ダウンロードしたjQueryUIを利用するには
サンプルコードのように記述します。

7行目にはjQueryの読み込み

13行目　jQueryUIのCSSの読み込み
14行目　jQueryUI本体読み込み

３．tabsメソッドを書く

メソッドというのは命令の事です。
サンプルコードの45行目の
「$("#tabs").tabs();」は

id="tabs"にtabs()という命令を行います。

これで、タブが作成されています。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryUI Tab</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    
    <!--
    jQueryUIを読みこむ。
    jQuery本体以降に読み込む
    -->
    <link type="text/css" rel="stylesheet" href="js/ui/jquery-ui.css">
    <script src="js/ui/jquery-ui.js"></script>

</head>
<body>

<div id="tabs">

    <!-- ここからタブ -->
    <ul>
        <li><a href="#tab1">memo1</a></li>
        <li><a href="#tab2">memo2</a></li>
        <li><a href="#tab3">memo3</a></li>
    </ul>
    <!-- ここまでタブ -->

    <!-- ここから各タブのコンテンツ設定箇所 -->
    <div id="tab1">
        <p>memo1の中身</p>
    </div>
    <div id="tab2">
        <p>memo2の中身</p>
    </div>
    <div id="tab3">
        <p>memo3の中身</p>
    </div>
    <!-- ここまで各タブのコンテンツ設定箇所 -->
</div>
    
<script>
    $(function(){
    //タブを設定したいもの指定する
    $("#tabs").tabs();
    });
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryUI Tab</title>

<!--

jQueryUIを読みこむ。

jQuery本体以降に読み込む

-->

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

</div>

$(function(){

//タブを設定したいもの指定する

$("#tabs").tabs();

});

</script>

</body>

</html>