Tab滑动门效果，简洁灰色风格的代码

发布时间：2018-09-09 19:27:28 所属栏目：政策来源：站长网

导读：Tab滑动门效果，简洁灰色风格的代码，和选项卡基本是一样的原理，只不过改变了一下JS的函数，在鼠标滑动TAB时更换内容，这就是滑动门的原理，onmouseClick改变为onmouseover，其实也就是将选项卡变为了滑动门。示例： htmlheadmeta http-equiv=Content-Ty

　　Tab滑动门效果，简洁灰色风格的代码，和选项卡基本是一样的原理，只不过改变了一下JS的函数，在鼠标滑动TAB时更换内容，这就是滑动门的原理，onmouseClick改变为onmouseover，其实也就是将选项卡变为了滑动门。

　　示例：

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>Tab滑动门效果 - Veryhuo.COM</title> <style type="text/css">  </style> <script>  </script> </head> <body> <br /> <br />  <div id="tabs1"> <div class="menu1box"> <ul id="menu1"> <li class="hover" onmouseover="setTab(1,0)">网站建设</li> <li onmouseover="setTab(1,1)">网络营销</li> <li onmouseover="setTab(1,2)">客户类别</li> </ul> </div> <div class="main1box"> <div class="main" id="main1"> <ul class="block"> <li><a href="###">网站的网络营销方案怎么写</a></li> <li><a href="###">企业如何做好网站建设营销SEM </a></li> <li><a href="###">网站SEO优化之百度搜索引擎</a></li> </ul> <ul> <li><a href="###" title="网站推广之如何更好的把自己的">网站推广之如何更好的把自己的</a></li> <li><a href="###">网站建设过程中网站标题的SEO</a></li> <li><a href="###">搜索引擎SEO营销(SEM)的服务流程</a></li> <li><a href="###">搜索引擎营销SEM的目的是什么</a></li> <li><a href="###">商丘seo之百度近期可能要进行大</a></li> <li><a href="######">网站SEO优化之一次增加很多外链</a></li> <li><a href="###">网站SEO之如何增加百度的相关域</a></li> </ul> <ul> <li><a href="###" title="煤球机">煤球机设备的修理方法</a></li> <li><a href="###" title="商丘装修网">国内外煤球机的厂家是哪些</a></li> <li><a href="###" title="全自动煤球机">煤球是如何做出来的</a></li> <li><a href="###" title="商丘购物网">有没有最好的煤球机机器设备</a></li> <li><a href="###" title="河南煤球机">国内常见的煤球机设备</a></li> </ul> </div> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

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