jQueryを使わずにタブ切り替えをjsで実装する

こちらのページを参考にしました。
http://hyper-text.org/archives/2007/09/javascript_tab.shtml

HTML

    <div id="javascript_tab_sample">

    <ul id="tab">
    <li class="selected"><a href="#w3c">W3C</a></li>
    <li><a href="#xhtml">XHTML</a></li>
    <li><a href="#css">CSS</a></li>
    </ul>

    <dl id="w3c">
    <dt>World Wide Web Consortium</dt>
    <dd>
    <p>...</p>
    </dd>
    </dl>

    <dl id="xhtml">
    <dt>XHTML</dt>
    <dd>
    <p>...</p>
    </dd>
    </dl>

    <dl id="css">
    <dt>Cascading Style Sheets</dt>
    <dd>
    <p>...</p>
    </dd>
    </dl>

    </div>

js

/*--setup--*/
window.onload=function() {
tab.setup = {
tabs: document.getElementById('tab').getElementsByTagName('li'),
pages: [
document.getElementById('w3c'),
document.getElementById('xhtml'),
document.getElementById('css')
]
}
tab.init();
}
/*--setup end--*/

var tab = {
init: function(){
var tabs = this.setup.tabs;
var pages = this.setup.pages;

for(i=0; i<pages.length; i++) {
if(i !== 0) pages[i].style.display = 'none';
tabs[i].onclick = function(){ tab.showpage(this); return false; };
}
},

showpage: function(obj){
var tabs = this.setup.tabs;
var pages = this.setup.pages;
var num;

for(num=0; num<tabs.length; num++) {
if(tabs[num] === obj) break;
}

for(var i=0; i<pages.length; i++) {
if(i == num) {
pages[num].style.display = 'block';
tabs[num].className = 'selected';
}
else{
pages[i].style.display = 'none';
tabs[i].className = null;
}
}
}
}

注意点

現在開いているタブにはクラス「selected」がつきますが、こちらは他のクラスが入っていても「selected」のみに上書きしなおしてしまいます。

js読み込み時に非表示のタブがアクティブになってしまうことがあります。

ここらへんはまた別の機会に調整をしたいと思っています。