一个JS TAB 特效 代码清晰明了，一看就懂！
来源：互联网 发布：JavaScript复选框样式 编辑：程序博客网 时间：2024/05/16 00:51
<!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>
