两个简洁美观的网页Tab滑动门菜单

2024-09-05 12:20:45

字体：大中小

来源：转载

供稿：网友

两个简洁美观的网页TAB滑动门，同时布局在单个网页中，与选项卡其实是不一样的，滑动门在鼠标滑过的瞬间就激活函数，选项卡需要鼠标点击才激活，两者各有优势，这要看具体的适用场合了，编写方法就请参考代码。

<!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>两个简洁美观的网页Tab选项卡菜单</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;  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</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>武林网VeVb提供各类编程源码、JavaScript/CSS特效代码以及常用软件下载等。</div>	<div>3经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div>	<div>武林网VeVb做有质量的学习型源码下载站。</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>

上一篇：jQuery 个性翻牌效果的导航菜单

下一篇：具备延时功能的滑动门菜单