タブを実装 - bi

JSのページを作りました

//--------------------------------------------------------------------//
// 前処理
//--------------------------------------------------------------------//
var i;

// ********************************************//
// <ul><li></li><li></li>...</ul> を描画
// ********************************************//
document.body.innerHTML  = ""
document.body.innerHTML += "<ul>"
for(i=0; i<5; i++){
  document.body.innerHTML += "<li>Page_" + i + "</a></li>";
}
document.body.innerHTML += "</ul>"
   
// ********************************************//
// <div></div>....<div></div>を描画
// ********************************************//
for(i=0; i<5; i++){
  document.body.innerHTML += "<div>" + i + "あいうえお" + i + "</div>";
}

//--------------------------------------------------------------------//
// tabオブジェクト
//--------------------------------------------------------------------//
var tab = {
           // ===================================================== //
           // メンバー
           // ===================================================== //
           tabs          : document.getElementsByTagName('li'),
           pages         : document.getElementsByTagName('div'),

           // ===================================================== //
           // 何番目の li がクリックされたか返す関数
           // ===================================================== //
           selected_num  : function(obj){
                             var i;
                             for( i=0; i<this.tabs.length; i++){
                               if( this.tabs[i] === obj ){ break; }
                             }
                             return i;
                           },

           // ===================================================== //
           // selected_numの番号にもとづいて、表示するdivを決める
           // ===================================================== //
           show_page     : function(num){
                             var i;
                             for( i=0; i<this.tabs.length; i++){
                               if( i == num ){ this.pages[i].style.display = 'block'; }
                                         else{ this.pages[i].style.display = 'none';  }
                             }
                           },

           // ===================================================== //
           // 0番目のdiv以外styleを'none'にする
           // すべてのliをクリック可能にする（タブ化する）
           // ===================================================== //
           do            : function(){
                             var i;
                             for( i=0; i<this.tabs.length; i++){
                               this.pages[i].style.display = 'none';
                               this.tabs[i].onclick = function(){
                                                        var num = tab.selected_num(this);
                                                        tab.show_page( num );
                                                      };
                             }
                             this.pages[0].style.display = 'block';
                           }
          };

//--------------------------------------------------------------------//
// タブ化 実行
//--------------------------------------------------------------------//
tab.do();

liがonclickされると、tabオブジェクトが呼び出されて、tabオブジェクトが頑張るイメージ。
liは単にtabオブジェクトを呼び出すに過ぎない。
li自身にタブ切り替えメソッドを持たしたほうがよいのかなーと昔考えてたんだけど、
このようにtabオブジェクトに任せるのがよいかも。

参考：タブ切替をサクッと実装 - Archiva