同时布局在单个页面中的两个简洁美观的Tab滑动门菜单

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 菜单导航 -> 同时布局在单个页面中的两个简洁美观的Tab滑动门菜单

同时布局在单个页面中的两个简洁美观的Tab滑动门菜单

作者:admin 发布时间:2010-11-27 9:06:15 发布人: admin

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

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

将本文收藏到QQ书签与更多好友分享

上一篇：文章：css模拟按钮效果的导航菜单下一篇：文章：鼠标感应延时功能的滑动门菜单

网页特效

同时布局在单个页面中的两个简洁美观的Tab滑动门菜单

本类浏览排行 »

本站推荐文章 »