采用的是类名的字符拼接 ，在setTab(name,num,n)方法中，传入部分共用的名字，当前的i==num的时候，n总个数（用于遍历出多有tab头和tabbox）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .mx-con { height: 590px; background: #f8f8f8; position: relative; } ul.xy-pic { width: 1000px; height: 120px; margin: 0 auto; border-bottom: 2px solid #ed553e; font-size: 0; letter-spacing: normal; word-spacing: normal; text-align: center; font-size: 0; padding: 40px 0 0 0; } ul.xy-pic li { width: 90px; height: 115px; padding: 5px 6px 0 6px; background: url(global.png) no-repeat 0 -2852px; display: inline-block; vertical-align: top; font-size: 14px; letter-spacing: normal; word-spacing: normal; margin: 0 21px; position: relative; } ul.xy-pic li a.cur1 { background: url(global.png) no-repeat 0 -2466px; } ul.xy-pic li a.cur2 { background: url(global.png) no-repeat 0 -2578px; } ul.xy-pic li a.cur3 { background: url(global.png) no-repeat 0 -2706px; } ul.xy-pic li.cur a.cur1, ul.xy-pic li a.cur1:hover { background: url(global.png) no-repeat -100px -2466px; } ul.xy-pic li.cur a.cur2, ul.xy-pic li a.cur2:hover { background: url(global.png) no-repeat -100px -2578px; } ul.xy-pic li.cur a.cur3, ul.xy-pic li a.cur3:hover { background: url(global.png) no-repeat -100px -2706px; } ul.xy-pic li a { width: 90px; height: 90px; display: block; } a { font-size: 12px; text-decoration: none; } ul.xy-pic li.cur i { display: block; } ul.xy-pic li i { width: 12px; height: 7px; overflow: hidden; background: url(global.png) no-repeat -100px -2983px; position: absolute; left: 50%; margin-left: -6px; bottom: -2px; display: none; } .xy-tips { line-height: 26px; padding: 32px 0 70px 0; text-align: center; font-size: 16px; text-align: center; } .xy-tips h5 { line-height: 70px; } </style> </head> <body> <div class="mx-con"> <ul class="xy-pic"> <li id="t_one1" onmouseover="setTab('t_one',1,3)" class="cur"> <a class="cur1" href="javascript:"></a> <i></i> </li> <li id="t_one2" onmouseover="setTab('t_one',2,3)" class=""> <a class="cur2" href="javascript:"></a> <i></i> </li> <li id="t_one3" onmouseover="setTab('t_one',3,3)" class=""> <a class="cur3" href="javascript:"></a> <i></i> </li> </ul> <div class="xy-tips" id="t_one_con1" style="display: block;">不同浏览器对于相同元素的默认样式并不一致。 <h5>—毛豆</h5> </div> <div class="xy-tips" id="t_one_con2" style="display: none;">而且不同内核的浏览器在某些控件（元素）的表现上也是各有差异。 <h5>—春田花花</h5> </div> <div class="xy-tips" id="t_one_con3" style="display: none;">比如字体、缩进等等，这些问题都是由于浏览器的默认样式（CSS）在作怪，下面西部e网整理了一份浏览器默认css的样式表文件。 <h5>—豆豆虫</h5> </div> </div> </body> </html> <script> function setTab(name,num,n){//t_one, index是否等于num,n是总数 for(i=1;i<=n;i++){ var menu=document.getElementById(name+i);//t_one+1 var con=document.getElementById(name+"_"+"con"+i);//t_one_con+1 menu.className=i==num?"cur":"";//当前cur下换背景图片，且让i标签display:block;如果当前的index值等于num，就添加样式cur，否则就清空； con.style.display=i==num?"block":"none";//如果当前的index值等于num，就让他显示，否则就隐藏 } } </script>
