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_",''))); // 指定するタブに切り替え }