表现、结构、行为分离的选项卡效果！-CSDN博客

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
window.οnlοad=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>
<style type="text/css">

</style>
</head>
<body>
<div class="tabs">
<h1 οnmοuseοver="changTab(this)"> 选项卡[1] </h1>
<h1 οnmοusemοve="changTab(this)"> 选项卡[2] </h1>
<h1 οnmοuseοver="changTab(this)"> 选项卡[3] </h1>
<h1 οnmοusemοve="changTab(this)"> 选项卡[4] </h1>
<div>1经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div>
<div>2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div>
<div>3经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div>
<div>4门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div>
</div>
</body>
</html>