タブでコンテンツを切り替える

タブをクリックしたときにページを遷移せずCSSのdisplayプロパティをblockまたはnoneに設定することによりコンテンツの切り替えを行う。

<div id="tabToggle">
<ul id="tab">
    <li class="selected"><a href="#chapter1">Chapter1</a>
    </li>
    <li><a href="#chapter2">Chapter2</a>
    </li>
    <li><a href="#chapter3">Chapter3</a>
    </li>
    <li><a href="#chapter4">Chapter4</a>
    </li>
</ul>
<div id="tabContents">
    <div id="chapter1">
        <h3>あああ</h3>
    </div>
    <div id="chapter2">
        <h3>いいいt</h3>
    </div>
    <div id="chapter3">
        <h3>ううう</h3>
    </div>
    <div id="chapter4">
        <h3>えええ</h3>
    </div>
</div>
</div>

var tabs;
var tabContents;

//ページ読み込み時にタブとコンテンツを取得する
window.onload = function(){
    tabs = document.getElementById('tab').getElementsByTagName('li');
    tabContents = document.getElementById('tabContents').getElementsByTagName('div');
    tabInit();
}

function tabInit(){
    for (i = 0; i < tabs.length; i++) {
        //ページ読み込み時は最初のタブ以外は非表示にする
        if (i != 0) {
            tabContents[i].style.display = 'none';
        }
        //タブにイベントを追加する
        tabs[i].onclick = function(){
            tabOpen	(this);
            return false;
        };
    }
}

function tabOpen(obj){
    var num;
    //選択されたタブを確認
    for (num = 0; num < tabs.length; num++) {
        if (tabs[num] == obj) 
            break;
    }
    //コンテンツの表示非表示を行う
    for (var i = 0; i < tabs.length; i++) {
        if (i == num) {
            tabContents[num].style.display = 'block';
            tabs[num].className = 'selected';
    }
        else {
            tabContents[i].style.display = 'none';
            tabs[i].className = null;
        }
    }
}