JavaScriptソース

var activeTab = "";  // 指定されているタブを保持する
var activeBody = ""; // 指定されている内容エリアを保持する

//-------------------------------------------------------------------------
// タブを生成する
// mainID    : 一番外枠のエレメントID
// tabTitles : タブの項目名が配列で渡される
// width     : 内容エリアの横幅
// height    : 内容エリアの縦幅
// iniTabNo  : 始めに指定するタブ(0から数える)
//-------------------------------------------------------------------------
function CreateTab(mainID, tabTitles, width, height, initTabNo){

  mainArea = document.getElementById(mainID);
  mainArea.style.width = width;
  mainArea.style.height = height;

  //----------------------------------------------
  // 内容エリア(DIV)にIDを振分ける
  //----------------------------------------------
  bodys = mainArea.getElementsByTagName('DIV');
  for(var bodyCount=0; bodyCount < bodys.length; bodyCount++){
    bodys[bodyCount].id = "body_" + bodyCount;
    bodys[bodyCount].style.display = "none"
  }

  //----------------------------------------------
  // タブを表示するエリアを生成して追加
  //----------------------------------------------
  tabArea = document.createElement('DIV');              // タブを表示するエリア(DIVエレメント生成)
  tabArea.id = "tabAreaPane"                            // タブ表示エリアのスタイル設定
  firstBody = mainArea.getElementsByTagName('DIV')[0];  // メインエリア内の一番初めのDIVエレメント取得
  mainArea.insertBefore(tabArea, firstBody);            // firstBodyの前に、tabAreaを挿入

  //----------------------------------------------
  // タブを生成してタブ表示エリアへ追加
  //----------------------------------------------
  for(var tabCount=0; tabCount<tabTitles.length; tabCount++){
    tab = document.createElement('DIV');        // タブ(DIVエレメント生成)
    tab.id = "tab_" + tabCount;                 // タブを識別する為のID振分け
    tab.onmouseover = MouseOverTab;             // マウスがタブに乗った時のイベント登録
    tab.onmouseout = MouseOutTab;               // マウスがタブから離れた時のイベント登録
    tab.onclick = ActiveTab;                    // マウスがクリックされた時のイベント登録
    tabTitle = document.createElement('SPAN');  // タブのタイトル(SPANエレメント生成)
    tabTitle.innerHTML = tabTitles[tabCount];   // タブのタイトルをセット
    tab.appendChild(tabTitle);                  // tabTitleをtabの子要素として追加
    tabArea.appendChild(tab);                   // tabをtabAreaの子要素として追加
  }

  //----------------------------------------------
  // 指定するタブに切り替え
  //----------------------------------------------
  switchArea(initTabNo);
}

//-------------------------------------------------------------------------
// タブ・内容エリアの切り替え
//-------------------------------------------------------------------------
function switchArea(number){
  // 指定するタブに切り替え
  if(activeTab != "") activeTab.className = "";              // 指定されていたタブのスタイルをデフォルトに戻す
  activeTab = tabArea.getElementsByTagName('DIV')[number];   // activeTabに現在指定されたタブを格納
  activeTab.className = "activeTab";                         // 指定した状態のスタイルを指定

  // 内容エリアの切り替え
  if(activeBody != "") activeBody.style.display = "none";
  activeBody = document.getElementById("body_" + number);
  activeBody.style.display = "block";
}
    
//-------------------------------------------------------------------------
// マウスカーソルがタブの上にある時の処理
//-------------------------------------------------------------------------
function MouseOverTab(){
  if( this.className != "activeTab" ){
    this.className = "overTab";
  }
}

//-------------------------------------------------------------------------
// マウスカーソルがタブの上からはなれた時の処理
//-------------------------------------------------------------------------
function MouseOutTab(){
  if( this.className == "overTab"){
    this.className = "outTab";
  }
}

//-------------------------------------------------------------------------
// タブがクリックされた時の処理
//-------------------------------------------------------------------------
function ActiveTab(){
  switchArea(this.id.match(this.id.replace("tab_",''))); // 指定するタブに切り替え  
}