Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 滑动门导航菜单,参数:对象id、样式、选择器

滑动门导航菜单,参数:对象id、样式、选择器

发布时间:2020-05-15   编辑:www.jquerycn.cn
jquery中文网为您提供滑动门导航菜单,参数:对象id、样式、选择器等资源,欢迎您收藏本站,我们将为您提供最新的滑动门导航菜单,参数:对象id、样式、选择器资源

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css教程">
*{margin:0;padding:0;}
body{line-height:22px}
.current{background:#f60;color:#fff}
dl{overflow:hidden;zoom:1;margin-bottom:30px}
dd{float:left;width:100px;text-align:center;list-style:none;cursor:pointer;}
li{display:none;}
</style>
</head>
<body>
<dl id="nav">
 <dd>菜单一</dd>
 <dd>菜单二</dd>
 <dd>菜单三</dd>
 <dd>菜单四</dd>
 <dd class="current">菜单五</dd>
</dl>
<ul id="bb">
 <li style="display:block">内容一</li>
 <li>内容二</li>
 <li>内容三</li>
 <li>内容四</li>
 <li>内容五</li>
</ul>
<script language="javascript教程">

function tabs(e1,e2){
 var tag1="dd",tag2="li",addclass="current",checkNav="",checkWrap="";
 var o1=document.getElementById(e1),o2=document.getElementById(e2),ElementNav=new Array();ElementWrap=new Array();
 chk=function(e,n){var v=eval("/" n "/gi");if(v==undefined){return true}else if(v.test(e.className)){return true};}
 function ser(e,arr,g,n){
  var tags=e.getElementsByTagName(g),v=0;
  for(i=0;i<tags.length;i ){
   if(chk(tags[i],n)==true){arr[v]=tags[i];v ;};
  }
 }
 function Start(e,f){
  var s=e.length;
  for(i=0;i<s;i ){
   e[i].onmouseover=function(){mOver(this)}
  }
  function mOver(obj){
   for(var i=0;i<s;i ){
    f[i].style.display="none";
    e[i].className="";
   }
   for(var i=0;i<s;i ){
    if(e[i]==obj){f[i].style.display="block";e[i].className=addclass}
   }
  }
 }
 ser(o1,ElementNav,tag1,checkNav);
 ser(o2,ElementWrap,tag2,checkWrap);
 Start(ElementNav,ElementWrap)
}

tabs("nav","bb")
</script>
</body>
</html>

您可能感兴趣的文章:
EasySlider 基于jQuery功能强大简单易用的滑动门插件
7款风格新颖的jQuery/CSS3菜单导航分享
学习从实践开始之jQuery插件开发 菜单插件开发
jquery入门—编写一个导航条(可伸缩)
Jquery 自定义动画概述及示例
jQuery 选择器项目实例分析及实现代码
基于JQuery的6个Tab选项卡插件
在网站上应该用的30个jQuery插件整理
jQuery入门知识简介
jQuery弹性滑动导航菜单实现思路及代码

[关闭]