提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>漂亮javascript css 選項卡菜單效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代碼加到<head>與</head>之間--><style type="text/css">body{ margin:5px; padding:0px;}.tabs{ width:auto; height:auto; border:0px solid red;}.selectTab,.unselectTab{ border:1px solid #BDDFF9; border-bottom-width:0; width:150px; height:23px; line-height:23px; vertical-align:middle; text-align:center; background-color:#37709B; margin:0; margin-right:18px; font-weight:bold; font-size:14px; color:#FFF; cursor:pointer; float:left;}.unselectTab{ color:#37709B; background-color:white;}.selectContent{border-top:5px #37709b solid;padding-top:8px;clear:both;}.unselectContent{ display:none;}</style><script language="javascript">window.onload=resetTab;function getTabTitle(tab) {var childNodesList=tab.childNodes;var titleNodes=new Array();var j=0;var i;for (i=0;i<childNodesList.length;i++) {if(childNodesList[i].nodeName=="H1") {titleNodes[j]=childNodesList[i];j++;}}return titleNodes;}function getTabContent(tab) {var childNodesList=tab.childNodes;var tabContent=new Array();var j=0;var i;for (i=0;i<childNodesList.length;i++) {if(childNodesList[i].nodeName=="DIV") {tabContent[j]=childNodesList[i];j++;}}return tabContent;}function resetTab() {var allDiv=document.getElementsByTagName("div");var tab=new Array();var j=0;var i;for (i=0;i<allDiv.length;i++) {if(allDiv[i].className=="tabs") {tab[j]=allDiv[i];j++;}}var tabTitle,tabContent;for(i=0;i<tab.length;i++) {tabTitle=getTabTitle(tab[i]);tabTitle[0].className="selectTab";tabContent=getTabContent(tab[i]);tabContent[0].className="selectContent";for (j=1;j<tabTitle.length;j++) {tabTitle[j].className="unselectTab";tabContent[j].className="unselectContent";}}}function changTab(tab) {var tabTitle,tabContent,i;if(tab.className!="selectTab") {tabTitle=getTabTitle(tab.parentNode);tabContent=getTabContent(tab.parentNode);for(i=0;i<tabTitle.length;i++) {if(tabTitle[i].className=="selectTab") {tabTitle[i].className="unselectTab";}if(tabContent[i].className=="selectContent") {tabContent[i].className="unselectContent";}}tab.className="selectTab";for(i=0;i<tabTitle.length;i++) {if(tabTitle[i].className=="selectTab") {tabContent[i].className="selectContent";break;}}}}</script></head><body><!--把下面代碼加到<body>與</body>之間--><div class="tabs"><h1 onmouseover="changTab(this)"> 選項卡[1] </h1><h1 onmousemove="changTab(this)"> 選項卡[2] </h1><h1 onmouseover="changTab(this)"> 選項卡[3] </h1><h1 onmousemove="changTab(this)"> 選項卡[4] </h1><div>1經過前述的多個步驟，一個基本的CHM檔案已製作完畢，在編譯前還可進行一些完善功能的設定，具體如下所述。</div><div>2門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區</div><div>3經過前述的多個步驟，一個基本的CHM檔案已製作完畢，在編譯前還可進行一些完善功能的設定，具體如下所述。</div><div>4門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區</div></div><br><div class="tabs"><h1 onmouseover="changTab(this)"> 選項卡[1] </h1><h1 onmousemove="changTab(this)"> 選項卡[2] </h1><h1 onmouseover="changTab(this)"> 選項卡[3] </h1><h1 onmousemove="changTab(this)"> 選項卡[4] </h1><div>1經過前述的多個步驟，一個基本的CHM檔案已製作完畢，在編譯前還可進行一些完善功能的設定，具體如下所述。</div><div>2門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區</div><div>3經過前述的多個步驟，一個基本的CHM檔案已製作完畢，在編譯前還可進行一些完善功能的設定，具體如下所述。</div><div>4門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區</div></div></body></html>
提示：您可以先修改部分代碼再運行
