界面简捷、玄色气魄威风凛凛的 Tabs 选项卡代码

发布时间：2018-08-17 09:02:47 所属栏目：创业来源：站长网

导读：这是一个Tabs选项卡结果，来自一个小著名气的源码网站，据该站长说此乃滑动门，可是颠末猛火测试后发明，下面的代码只是一个选项卡，滑动门与选项卡最大的区别就是屏与屏之间的自动与手动切换。不说费话了，先容下面的选项卡，界面较量简捷，玄色气魄沤背同鼠

　　这是一个Tabs选项卡结果，来自一个小著名气的源码网站，据该站长说此乃滑动门，可是颠末猛火测试后发明，下面的代码只是一个选项卡，滑动门与选项卡最大的区别就是屏与屏之间的自动与手动切换。

　　不说费话了，先容下面的选项卡，界面较量简捷，玄色气魄沤背同鼠标点击后切屏。

　　殊效演示：

<html> <head> <title>简朴的Tab选项卡</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> *{margin:0;padding:0;} a:link,a:visited{text-decoration:none;} a:hover{text-decoration:none;} ul{list-style:none;} .subMenu{background:#333;float:left;padding-top:2px;width:100%;} .subMenu li{float:left;} .subMenu li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;} .subMenu .thisStyle a {background:#fff;color:#000;} .subContent{clear:both;border:2px solid #000;border-top:none;background:#fff;} .subContent ul{display:none;padding:15px;line-height:180%;} </style> </head> <body> <ul class="subMenu"> <li class="thisStyle"><a href="javascript:void(0)">目次</a></li> <li><a href="javascript:void(0)">列表</a></li> <li><a href="javascript:void(0)">产物</a></li> <li><a href="javascript:void(0)">猛火</a></li> </ul> <div class="subContent"> <ul style="display:block;"> <li><a href="#">111111</a></li> <li><a href="#">111111</a></li> <li><a href="#">111111</a></li> <li><a href="#">111111</a></li> </ul> <ul> <li><a href="#">222222</a></li> <li><a href="#">222222</a></li> <li><a href="#">222222</a></li> <li><a href="#">222222</a></li> </ul> <ul> <li><a href="#">333333</a></li> <li><a href="#">333333</a></li> <li><a href="#">333333</a></li> <li><a href="#">333333</a></li> </ul> <ul> <li><a href="#">444444</a></li> <li><a href="#">444444</a></li> <li><a href="#">444444</a></li> <li><a href="#">444444</a></li> </ul> </div> <script> function $_class(name){ var elements = document.getElementsByTagName("*"); for(s=0;s<elements.length;s++){ if(elements[s].className==name){ return elements[s]; } } } //tab effects var tabList = $_class("subMenu").getElementsByTagName("li") tabCon = $_class("subContent").getElementsByTagName("ul"); for(i=0;i<tabList.length;i++){ (function(){ var t = i; tabList[t].onclick = function(){ for(o=0;o<tabCon.length;o++){ tabCon[o].style.display = "none"; tabList[o].className = ""; if(t==o){ this.className = "thisStyle"; tabCon[o].style.display = "block"; } } } })() } </script> </bdoy> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

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