JavaScript写的选项卡Tab[附样式修改说明]

发布时间：2018-08-24 04:10:42 所属栏目：政策来源：站长网

导读：烈火在网上看到一个选项卡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>
提示：可修改后代码再运行!

（编辑：辽源站长网）

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