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

　　烈火在网上看到一个选项卡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> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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

由 dawei

相关文章

导航界面推荐广告？蔚来回应 不会用车机屏幕展开广告业务

第四届进博会进入布展阶段 首批展品已进入场

他们是数字经济领域的弄潮儿，2021年度数字新浙商榜单发布

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

导航界面推荐广告？蔚来回应不会用车机屏幕展开广告业务

第四届进博会进入布展阶段首批展品已进入场