Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><title>Nice javascript css tab menu effect</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<pead>与</pead>之间--><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></pead><body><!--把下面代码加到<body>与</body>之间--><div class="tabs"><p onmouseover="changTab(this)">Tab [1]</p><p onmousemove="changTab(this)">Tab [2]</p><p onmouseover="changTab(this)">Tab [3]</p><p onmousemove="changTab(this)">Tab [4]</p><div>1. After completing the preceding steps, a basic CHM file has been created. You can complete some functional settings before compilation, as described below.</div><div>2 Categories Wugong exhibition area categories Wugong exhibition area</div><div>3. After completing the preceding steps, a basic CHM file has been created. You can complete some functional settings before compilation, as described below.</div><div>Four categories of martial arts exhibition area</div></div><br><div class="tabs"><p onmouseover="changTab(this)">Tab [1]</p><p onmousemove="changTab(this)">Tab [2]</p><p onmouseover="changTab(this)">Tab [3]</p><p onmousemove="changTab(this)">Tab [4]</p><div>1. After completing the preceding steps, a basic CHM file has been created. You can complete some functional settings before compilation, as described below.</div><div>2 Categories Wugong exhibition area categories Wugong exhibition area</div><div>3. After completing the preceding steps, a basic CHM file has been created. You can complete some functional settings before compilation, as described below.</div><div>Four categories of martial arts exhibition area</div></div></body></ptml>
Tip: you can modify some code before running
