一个JS TAB 特效 代码清晰明了,一看就懂!
2013-11-04 11:47
225 查看
<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> .products{ width:960px; height:620px; overflow:hidden; margin-top:10px; position:relative; } .products .title{ height:35px; background:#FFFF; line-height:35px; } .products .title h1{ font-size:14px; color:#FFF; font-weight:bold; float:left; padding-left:10px; } .mplink{ width:960px; height:35px; } .mplink li{ float:left; } .mplink li a{ color:#fff; width:191px; height:35px; display:block; text-align:center; background:url(libg.png) no-repeat; margin-right:1px; } .mplink li a:hover{ background:url(lion.png) no-repeat; } .mplink li a.hover{ background:url(lion.png) no-repeat; } </style> </head> <body> <div class="product"> <div class="title"> <ul class="mplink"> <li><a href="" id="one1" class="hover" onmousemove="setTab('one',1,5)">Hydraulic Parts</a></li> <li><a href="" id="one2" onmousemove="setTab('one',2,5)">Hydraulic motor</a></li> <li><a href="" id="one3" onmousemove="setTab('one',3,5)">Hydraulic Gear pump</a></li> <li><a href="" id="one4" onmousemove="setTab('one',4,5)">Hydraulic Vane pump</a></li> <li><a href="" id="one5" onmousemove="setTab('one',5,5)">Hydraulic Piston pump</a></li> </ul> </div> <div id="con_one_1" style="display:block"> 1 </div> <div id="con_one_2" style="display:block"> 2 </div> <div id="con_one_3" style="display:block"> 3 </div> <div id="con_one_4" style="display:block"> 4 </div> <div id="con_one_5" style="display:block"> 5 </div> </div> <script type="text/javascript"> function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } </script> <script type="text/javascript"> setTab('one',1,5);</script> </body> </html>
相关文章推荐
- 原生JS写的一个书架式的图片缩放滚动展示特效代码
- 基于HTML+CSS+JS实现增加删除修改tab导航特效代码
- JS弹窗广告特效代码,一个IP只弹出1次
- 一个js的tab切换效果代码[代码分离]
- jquery/js特效代码总结(一):tab切换
- 收集的一个表格特效的JS代码
- 原生js实现tab选项卡里内嵌图片滚动特效代码
- 一个简单的Tab平滑切换特效jquery代码,没有做最大效率优化
- 一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮
- 一个js的tab切换效果代码[代码分离]
- 用JS写的一个TableView控件代码
- easyUI_执行tab窗口中的方法,sources源码中查看不到js代码
- Ajax (部分二:prototype.js代码)总结页面向后台传Form值、单个值和后台向前台传一个或是一组值
- JS特效代码大全(八)鼠标拖动效果
- js 计时器,倒计时完整实例代码附效果图 制作一个当前时间的动态时钟
- dialog使用方法(同一页面,调用一个js代码,实现多个不同样式的弹窗)
- js tab效果代码增强版
- 一行js代码!实现一个简洁表格
- tytabs.jquery.min.js实例,渐变的TAB选项卡特效
- 转载的一个3D的JS代码