js 选项卡举例

来源：互联网发布：windows无法识别u盘编辑：程序博客网时间：2024/06/03 16:04

<!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.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>
<style type="text/css">

</style>
</head>
<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>
</body>
</html>

0 0