一个封装了代码的滑动门导航菜单

yqxbc 发布时间：08-27 来源：一起学编程浏览：1次

　　使用说明：
　　1、修改部分tabs("nav","bb")中nav和bb对应导航和内容的id。
　　2、脚本首行tag1和tag2是对应的标签名，addclass是鼠标移上去的导航样式，checkNav和checkWrap是根据class判定导航和内容id里面的标签是否属于滑动门的部分。

　　代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml">\n<head>\n<title>一个封装了代码的滑动门导航菜单，参数：对象id、样式、选择器</title>\n<meta http-equiv="content-type" content="text/html;charset=gb2312">\n<style type="text/css">\n*{margin:0;padding:0;}\nbody{line-height:22px}\n.current{background:#f60;color:#fff}\ndl{overflow:hidden;zoom:1;margin-bottom:30px}\ndd{float:left;width:100px;text-align:center;list-style:none;cursor:pointer;}\nli{display:none;}\n</style>\n</head>\n<body>\n<dl id="nav">\n <dd>菜单一</dd>\n <dd>菜单二</dd>\n <dd>菜单三</dd>\n <dd>菜单四</dd>\n <dd class="current">菜单五</dd>\n</dl>\n<ul id="bb">\n <li style="display:block">内容一</li>\n <li>内容二</li>\n <li>内容三</li>\n <li>内容四</li>\n <li>内容五</li>\n</ul>\n<script language="javascript">\nfunction tabs(e1,e2){\n var tag1="dd",tag2="li",addclass="current",checkNav="",checkWrap="";\n var o1=document.getElementById(e1),o2=document.getElementById(e2),ElementNav=new Array();ElementWrap=new Array();\n chk=function(e,n){var v=eval("/"+n+"/gi");if(v==undefined){return true}else if(v.test(e.className)){return true};}\n function ser(e,arr,g,n){\n  var tags=e.getElementsByTagName(g),v=0;\n  for(i=0;i<tags.length;i++){\n   if(chk(tags[i],n)==true){arr[v]=tags[i];v++;};\n  }\n }\n function Start(e,f){\n  var s=e.length;\n  for(i=0;i<s;i++){\n   e[i].onmouseover=function(){mOver(this)}\n  }\n  function mOver(obj){\n   for(var i=0;i<s;i++){\n    f[i].style.display="none";\n    e[i].className="";\n   }\n   for(var i=0;i<s;i++){\n    if(e[i]==obj){f[i].style.display="block";e[i].className=addclass}\n   }\n  }\n }\n ser(o1,ElementNav,tag1,checkNav);\n ser(o2,ElementWrap,tag2,checkWrap);\n Start(ElementNav,ElementWrap)\n}\ntabs("nav","bb")\n</script>\n</body>\n</html>

如果你有好的win10资讯或者win10教程，以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息！

文章目录