今天i遇到两个TAB切换的，用了两种方法，也没弄明白哪个更合适，唉····
第一个，鼠标经过背景图转换（）本来是要跟第二个一样写，直接切背景图的，可是太多了，切起来好麻烦，所以，行不通····
<style type="text/css">
.jqdemo {930px;height:317px; clear:both; background-image:url(../images/sy_bn13.png); margin:0; padding:0;}
.tabmenu {925px;height:41px; padding-top:10px; clear:both; padding-left:5px; color:#FFF;}
.tabmenu ul {margin:0;padding:0;list-style-type: none;}
.tabmenu li { text-align:center; float:left; display:block; 110px; height:31px; overflow:hidden; line-height:27px; display:inline;
font-size:14px; background: url(../images/sy_bn15.jpg);}
.tabmenu .cli {text-align:center;float:left;display:block;110px;height:31px;overflow:hidden;line-height:27px;display:inline;font-size:14px; cursor:pointer; background:url(../images/sy_bn14.jpg);}
#tabcontent {930px;height:317px; }
#tabcontent ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden {display:none;}
</style>
<script type="text/javascript">
function tabChange(obj,id)
{
var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
for(i=0;i<arrayul.length;i++)
{
if(obj==arrayli[i])
{
arrayli[i].className = "cli";
arrayul[i].className = "";
}
else
{
arrayli[i].className = "";
arrayul[i].className = "hidden";
}
}
}
</script>
<div class="jqdemo">
<div class="tabmenu">
<ul>
<li onmouseover="tabChange(this,'tabcontent')" class="cli">标准型</li>
<li onmouseover="tabChange(this,'tabcontent')">健硕型</li>
<li onmouseover="tabChange(this,'tabcontent')">矮胖型</li>
<li onmouseover="tabChange(this,'tabcontent')">矮瘦型</li>
<li onmouseover="tabChange(this,'tabcontent')">高瘦型</li>
<li onmouseover="tabChange(this,'tabcontent')">中广型</li>
<li onmouseover="tabChange(this,'tabcontent')">下盘稳重型</li>
</ul>
</div>
<div id="tabcontent">
<ul name="tabul">
<div class="tab_left">
<div class="tab_top"><span class="tab_boy">标准型男人适合穿什么衣服<br />
</span>与花色衬衫相反的是，当选购领带花色时，可以多考量花色的样式，但夸张的印花、图腾及具闪亮光泽的布面就不宜，若你本身偏好单色系领带，深色系往往是较佳的选择，喜欢来点变化的话，几何线条织纹的领带就是不错的选择。</div>
<div class="tab_top_01"><span class="tab_boy">标准型男人适合穿什么衣服 <br />
</span>与花色衬衫相反的是，当选购领带花色时，可以多考量花色的样式，但夸张的印花、图腾及具闪亮光泽的布面就不宜，若你本身偏好单色系领带，深色系往往是较佳的选择，喜欢来点变化的话，几何线条织纹的领带就是不错的选择。<br />
<span class="tab_more"><a href="#">查看更多>></a></span></div>
</div>
<div class="tab_right"><img src="images/sy_bn16.jpg" width="165" height="200" /></div>
</ul>
<ul class="hidden">
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
</ul>
<ul class="hidden">
<li><a href="#">3333333333333333333333</a></li>
<li><a href="#">3333333333333333333333</a></li>
<li><a href="#">3333333333333333333333</a></li>
<li><a href="#">3333333333333333333333</a></li>
<li><a href="#">3333333333333333333333</a></li>
<li><a href="#">3333333333333333333333</a></li>
</ul>
<ul class="hidden">
<li><a href="#">4444444444444444444444</a></li>
<li><a href="#">4444444444444444444444</a></li>
<li><a href="#">4444444444444444444444</a></li>
<li><a href="#">4444444444444444444444</a></li>
<li><a href="#">4444444444444444444444</a></li>
<li><a href="#">4444444444444444444444</a></li>
</ul>
<ul class="hidden">
<li><a href="#">5555555555555555555555</a></li>
<li><a href="#">2222222222222222</a></li>
<li><a href="#">3333333333333333</a></li>
<li><a href="#">444444444444444</a></li>
<li><a href="#">555555555555</a></li>
<li><a href="#">66666666666666</a></li>
<li><a href="#">7777777777777777</a></li>
</ul>
<ul class="hidden">
<li><a href="#">5555555555555555555555</a></li>
<li><a href="#">2222222222222222</a></li>
<li><a href="#">3333333333333333</a></li>
<li><a href="#">444444444444444</a></li>
<li><a href="#">555555555555</a></li>
<li><a href="#">66666666666666</a></li>
<li><a href="#">7777777777777777</a></li>
</ul>
<ul class="hidden">
<li><a href="#">5555555555555555555555</a></li>
<li><a href="#">2222222222222222</a></li>
<li><a href="#">3333333333333333</a></li>
<li><a href="#">444444444444444</a></li>
<li><a href="#">555555555555</a></li>
<li><a href="#">66666666666666</a></li>
<li><a href="#">7777777777777777</a></li>
</ul>
</div>
</div>
第二个就是 背景图直接切得，没有用到 onmouseover
<style type="text/css">
.main_content_top{ 928px; height:1000px;}
.tab{ font-size:14px; font-weight:bold;}
#TabTab03Con1,#TabTab03Con2,#TabTab03Con3,#TabTab03Con4,#TabTab03Con5{910px;height:800px; padding:10px;}
.xixi1{930px;height:30px;line-height:30px; background:url(../images/sy_bn18.png);cursor:pointer;}
.xixi2{930px;height:30px;line-height:30px;background:url(../images/sy_bn19.png);cursor:pointer;}
.xixi3{930px;height:30px;line-height:30px;background:url(../images/sy_bn20.png);cursor:pointer;}
.xixi4{930px;height:30px;line-height:30px;background:url(../images/sy_bn21.png);cursor:pointer;}
.xixi5{930px;height:30px;line-height:30px;background:url(../images/sy_bn22.png);cursor:pointer;}
.tab1,.tab2,.tab3,.tab4,.tab5{115px;height:30px;line-height:30px;float:left;text-align:center;cursor:pointer;}
.tab_images{ 220px; height:240px; border: 1px #CCC solid; float:left; margin-right:5px; margin-top:5px;}
.tab_left{ float:left; 680px; padding:10px; border:#CCC 1px solid; line-height:20px; margin-left:10px; height:180px;}
.tab_right{ float:left; margin-left:20px;}
.tab_boy{ font-size:15px; color:#336699;}
.tab_top{ border-bottom:1px #CCC dashed; padding-bottom:10px;}
.tab_top_01{ padding-top:10px;}
.tab_more{ float:right; padding-top:10px; }
.tab_more a{ font-size:14px; color:#000;}
.tab_more a:hover{ text-decoration:underline;}
</style>
<script type="text/javascript">
function setTab03Syn ( i )
{
selectTab03Syn(i);
}
function selectTab03Syn ( i )
{
switch(i){
case 1:
document.getElementById("TabTab03Con1").style.display="block";
document.getElementById("TabTab03Con2").style.display="none";
document.getElementById("TabTab03Con3").style.display="none";
document.getElementById("TabTab03Con4").style.display="none";
document.getElementById("TabTab03Con5").style.display="none";
document.getElementById("font1").style.color="#000000";
document.getElementById("font2").style.color="#ffffff";
document.getElementById("font3").style.color="#ffffff";
document.getElementById("font4").style.color="#ffffff";
document.getElementById("font5").style.color="#ffffff";
break;
case 2:
document.getElementById("TabTab03Con1").style.display="none";
document.getElementById("TabTab03Con2").style.display="block";
document.getElementById("TabTab03Con3").style.display="none";
document.getElementById("TabTab03Con4").style.display="none";
document.getElementById("TabTab03Con5").style.display="none";
document.getElementById("font1").style.color="#ffffff";
document.getElementById("font2").style.color="#000000";
document.getElementById("font3").style.color="#ffffff";
document.getElementById("font4").style.color="#ffffff";
document.getElementById("font5").style.color="#ffffff";
break;
case 3:
document.getElementById("TabTab03Con1").style.display="none";
document.getElementById("TabTab03Con2").style.display="none";
document.getElementById("TabTab03Con3").style.display="block";
document.getElementById("TabTab03Con4").style.display="none";
document.getElementById("TabTab03Con5").style.display="none";
document.getElementById("font1").style.color="#ffffff";
document.getElementById("font2").style.color="#ffffff";
document.getElementById("font3").style.color="#000000";
document.getElementById("font4").style.color="#ffffff";
document.getElementById("font5").style.color="#ffffff";
break;
case 4:
document.getElementById("TabTab03Con1").style.display="none";
document.getElementById("TabTab03Con2").style.display="none";
document.getElementById("TabTab03Con3").style.display="none";
document.getElementById("TabTab03Con4").style.display="block";
document.getElementById("TabTab03Con5").style.display="none";
document.getElementById("font1").style.color="#ffffff";
document.getElementById("font2").style.color="#ffffff";
document.getElementById("font3").style.color="#ffffff";
document.getElementById("font4").style.color="#000000";
document.getElementById("font5").style.color="#ffffff";
break;
case 5:
document.getElementById("TabTab03Con1").style.display="none";
document.getElementById("TabTab03Con2").style.display="none";
document.getElementById("TabTab03Con3").style.display="none";
document.getElementById("TabTab03Con4").style.display="none";
document.getElementById("TabTab03Con5").style.display="block";
document.getElementById("font1").style.color="#ffffff";
document.getElementById("font2").style.color="#ffffff";
document.getElementById("font3").style.color="#ffffff";
document.getElementById("font4").style.color="#ffffff";
document.getElementById("font5").style.color="#000000";
break;
}
}
</script>
<div id="main_content">
<div class="main_content_top">
<div class="tab">
<div id="bg" class="xixi1">
<div id="font1" class="tab1" onMouseOver="setTab03Syn(1);document.getElementById('bg').className='xixi1'">全部场合</div>
<div id="font2" class="tab2" onMouseOver="setTab03Syn(2);document.getElementById('bg').className='xixi2'">正式商务</div>
<div id="font3" class="tab3" onMouseOver="setTab03Syn(3);document.getElementById('bg').className='xixi3'">商务休闲</div>
<div id="font4" class="tab4" onMouseOver="setTab03Syn(4);document.getElementById('bg').className='xixi4'">party</div>
<div id="font5" class="tab5" onMouseOver="setTab03Syn(5);document.getElementById('bg').className='xixi5'">约会</div>
</div>
<div id=TabTab03Con1>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
</div>
<div id=TabTab03Con2 style="display:none">
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
</div>
<div id=TabTab03Con3 style="display:none">
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
</div>
<div id=TabTab03Con4 style="display:none">
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
</div>
<div id=TabTab03Con5 style="display:none">
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
<div class="tab_images"><a href="#"><img src="images/sy_bn23.jpg" width="220" height="240" /></a></div>
</div>
</div>
</div>
<div class="main_content_di"><img src="images/sy_bn17.png" width="930" height="20" /></div>
</div>
