js里的两个切换

zoukankan html css js c++ java

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>

查看全文

相关阅读:
Codeforces 1265A Beautiful String
1039 Course List for Student (25)
1038 Recover the Smallest Number (30)
1037 Magic Coupon (25)
1024 Palindromic Number (25)
1051 Pop Sequence (25)
1019 General Palindromic Number (20)
1031 Hello World for U (20)
1012 The Best Rank (25)
1011 World Cup Betting (20)

原文地址：https://www.cnblogs.com/tantry/p/2703165.html