漂亮javascript css 选项卡菜单效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!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 <a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a> 选项卡菜单效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<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;
  
  
  line-
  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>

<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>

提示：您可以先修改部分代码再运行

漂亮javascript css 选项卡菜单效果

相关文章

精彩推荐