当前位置：首页 → 问答吧 → 封装了个滑动门参数：对象id、样式、选择器

封装了个滑动门参数：对象id、样式、选择器

时间：2010-05-10

来源：互联网

<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link type="image/x-icon" href="" rel="shortcut icon"> <link href="template.css" type="text/css" rel="stylesheet" media="screen"> <style> *{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 id="body"> <dl id="nav"> <dd>1</dd> <dd>1</dd> <dd>1</dd> <dd>1</dd> <dd class="current">1</dd> </dl> <ul id="bb"> <li style="display:block">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div>修改部分 tabs("nav","bb") nav bb对应导航和内容的id</div> <div>脚本首行 tag1，tag2是对应标签名 addclass是鼠标一上去的导航样式 checkNav,checkWrap是根据class判定导航和内容id里面的标签是否属于滑动门的部分</div> <script> 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>
提示：您可以先修改部分代码再运行

呵呵今天用的时候发现多个不同标签的滑动门的时候修改不方便重新封装了一下参数发上来兼容多个不同标签的滑动门
下星期再美化一下~

<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link type="image/x-icon" href="" rel="shortcut icon"> <link href="template.css" type="text/css" rel="stylesheet" media="screen"> <style> *{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 id="body"> <dl id="nav"> <dd>1</dd> <dd>1</dd> <dd>1</dd> <dd>1</dd> <dd class="current">1</dd> </dl> <ul id="bb"> <li style="display:block">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div>修改部分 tabs("nav","bb") nav bb对应导航和内容的id</div> <div>脚本首行 tag1，tag2是对应标签名 addclass是鼠标一上去的导航样式 checkNav,checkWrap是根据class判定导航和内容id里面的标签是否属于滑动门的部分</div> <script> function tabs(e1,e2,tag1,tag2,classchk){ var addclass="current",checkNav="",checkWrap=classchk; 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","dd","li","") </script> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 lifeseato 于 2010-5-18 10:51 编辑 ]

作者: lifeseato 发布时间: 2010-05-10

还算简洁的，再把美工加工下，看着效果就更好了

作者: ornet 发布时间: 2010-05-10

呵呵主要是想做个易用的功能

这样自己方便大家也方便