2012-10-25 1st

jsdoit.css

body { background-color: #DDDDDD; font: 30px sans-serif; }
#g-navi li{
  display: inline;
}

jsdoit.html

<!--
  TabViewをつくろう!!
-->

<nav id="g-navi">
    <ul>
<li><a href="#page1">ぺーじ1</a></li>
<li><a href="#page2">ぺーじ2</a></li>
<li><a href="#page3">ぺーじ3</a></li>
    </ul>
</nav>

<section id="page1">
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</section>
<section id="page2">
    ににににににににににににににににににににににに
</section>
<section id="page3">
    さんさんさんさんさんさんさんさんさんさんさんさんさんさんさんさんさんさんさんさんさんさん
</section>

jsdoit.js

var TabView = function (selector) {
    // タブの名前をクリックすると、画面をそのタブに切り替える

    // →動作を具体的にしてみる (jsでかけそうな感じがするまで分解)
    // (1) タブの名前がクリックされた時に
    // (2) 全てのタブをいったん非表示にする
    // (3) クリックされたタブ名のタブのみ表示する
    // ↓必要な実装
    // ・(タブの名前が)クリックされた時
    // ・(タブを)非表示
    // ・(タブを)表示

    // ↓ぜんぶ、jQueryでできます!!
    // $(なんか).click(function () {
    //
    // })
    
    // $(なんか).hide()
    // $(なんか).show()
    
    // → 登場人物 (とってくるべきHTML要素)
    // #g-navi: 
    //        : aタグ(タブの名前)
    //        : sectionタグ(タブ本体)
    
    var $navi = $(selector);

    // タブの名前要素を取得
    var $tabnames = $('a', selector);

    // タブ本体を取得
    var tabs = [];
    $tabnames.each(function () {
        // タブ本体は、タブの名前要素のhrefを元に取得する
        var sectionSelector = $(this).attr('href');
        tabs.push($(sectionSelector));

        $(this).click(function () {
            tabs.forEach(function (tab) { $(tab).hide(); });
            $(sectionSelector).show();
        });
    });
}; 


$(function () {
    new TabView('#g-navi');
});