JavaScript写的选项卡Tab[附样式修改声名]

发布时间：2018-08-20 12:23:45 所属栏目：创业来源：站长网

导读：猛火在网上看到一个选项卡Tab的雏形，因为作者只是封装了简朴的雏形，UI根基没有，鼠标放上去就可以看到结果，没有修饰，显得有些粗拙。这里声名一下用法：修改部门 tabs(nav,bb) nav bb对应导航和内容的id，剧本首行 tag1，tag2是对应标署名 addclass是鼠

　　猛火在网上看到一个选项卡Tab的雏形，因为作者只是封装了简朴的雏形，UI根基没有，鼠标放上去就可以看到结果，没有修饰，显得有些粗拙。这里声名一下用法：修改部门 tabs("nav","bb") nav bb对应导航和内容的id，剧本首行 tag1，tag2是对应标署名 addclass是鼠标一上去的导航样式 checkNav,checkWrap是按照class鉴定导航和内容id内里的标签是否属于滑动门的部门。

　　必要的伴侣可以本身写一下CSS，关于CSS的教程，请参照手册：http://www.veryhuo.com/a/manual/css/

　　最终结果：

<!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=GBK"> <title>选项卡Tab - Liehuo.Net</title> <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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如