js里的两个切换

今天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>