这篇文章主要介绍了JS实现同一个网页布局滑动门和TAB选项卡效果,通过简单的自定义切换函数setTab实现页面元素的遍历及属性切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡。分享给大家供大家参考。具体如下:
这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有太大的区别,无非是鼠标动作的不同而已,但是有时候在同一个网页中布局两个以上的选项卡,总容易产生混乱,导致JS出错,如果你需要这样做,那么就请参考本实例,帮你解决这个问题。
运行效果截图如下:
在线演示地址如下:
http://demo.html.cn/js/2015/js-web-hd-tab-menu-style-codes/
具体代码如下:
修正版的网页Tab滑动门 *{margin:0;padding:0;} body{margin:50px;font-size:12px;color:#666;} li{list-style:none;} .list{width:378px;height:100px;padding:10px;font-size:14px;line-height:24px;border:1px #cfedff solid;border-top:0;} .tab{width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;background:url(images/title.gif) repeat-x;} .tab ul{margin:0;padding:0;} .tab li{float:left;padding:0 30px;height:34px;line-height:34px;text-align:center;border-right:1px #ebf7ff solid;cursor:pointer;} .tab li.now{color:#5299c4;background:#fff;font-weight:bold;} .block{display:block;}TAB切换onMouse
- 儒家
- 法家
- 墨家
- 道家
TAB切换onClick
- 儒家
- 法家
- 墨家
- 道家
希望本文所述对大家的JavaScript程序设计有所帮助。
以上就是JS实现同一个网页布局滑动门和TAB选项卡实例的详细内容,更多请关注本站其它相关文章!