层切换效果

<!-- begin -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
    #YueKu{width:287px;height:189px;margin:0 auto;position:relative;}
    .YKTiImg{width:82px;height:32px;overflow:hidden;position:absolute; left:-1px;top:-7px;}
    #YueKu h1{background:#FFF4CB; border-bottom:1px #FFBB1A solid; height:24px; overflow:hidden; text-align:right; padding:0 9px 0 0; line-height:27px; margin-bottom:6px;}
    #YKTabs{height:27px; overflow:hidden; background:url(http://image2.sina.com.cn/home/07index/sinahome_070309_ws_009.gif) repeat-x; padding:0 0 0 8px;}
    #YKTabs li{width:51px; height:27px; overflow:hidden; background:url(http://image2.sina.com.cn/home/07index/sinahome_070309_ws_011.gif) no-repeat; text-align:center; line-height:24px; color:#000; float:left; cursor:pointer; margin:0 3px 0 0;}
    #YKTabs li.YKTabsOn{background:url(http://image2.sina.com.cn/home/07index/sinahome_070309_ws_010.gif) no-repeat; font-weight:bold; color:#982E00;}
    .YKTabCon{clear:both;}
    .YKTabConB01{height:80px; overflow:hidden; clear:both; padding:0 0 0 7px;}
    .YKTabConB01ImgB{width:69px; overflow:hidden; float:left; padding:4px 0 0 0;}
    .YKTabConB01ImgB a{color:#CF0103; text-decoration:underline;}
    .YKTabConB01ImgB a:hover{color:#f00; text-decoration:underline;}
    .YKTabConB01ImgB a span{display:block; padding:5px 0 0 0; text-align:center;}
    .YKTabConB01ImgB a img{border:1px #000 solid;}
    ul.YKTabConB01UL01{width:88px; float:left; padding:0 0 0 10px;}
    ul.YKTabConB01UL01 li{text-align:left; padding:3px 0 0 17px; background:url(http://image2.sina.com.cn/home/07index/sinahome_070309_ws_013.gif) no-repeat 0 3px; height:17px; overflow:hidden; clear:both;}
    .YKNameList{clear:both; height:20px; overflow:hidden; padding:4px 0 0 7px; text-align:left;}
    .YKSearch{clear:both; padding:0 0 0 9px; text-align:left;}
    .YKSearch .YKSearch-K{width:150px; height:16px; line-height:18px; color:#616362; padding:0 0 0 4px; margin:2px 0 0 0;}
    .YKSearch .YKSearch-Sl{width:50px; margin:2px 0 0 4px; color:#616362;}
    .YKSearch .YKSearch-Btn{width:50px; height:20px; overflow:hidden; font-size:12px; text-align:center; color:#000; margin:0 0 0 4px; cursor:pointer;}
</style>
<script type="text/javascript">
    //<![CDATA[
        function Show_YKTab(YKTabid_num,YKTabnum)
        {
            for(var i=0;i<5;i++)
            {   
            document.getElementById("YKTabCon_"+YKTabid_num+i).style.display="none";
            }
            for(var i=0;i<5;i++)
            {
                document.getElementById("YKTabMu_"+YKTabid_num+i).className="";
            }
            document.getElementById("YKTabMu_"+YKTabid_num+YKTabnum).className="YKTabsOn";
            document.getElementById("YKTabCon_"+YKTabid_num+YKTabnum).style.display="block";
        }
        //]]>
</script>
<div id="YueKu">
    <!-- 标签开始 begin -->
    <ul id="YKTabs">
        <li class="YKTabsOn" id="YKTabMu_10" onmouseover="Show_YKTab(1,0);">新歌</li>
        <li id="YKTabMu_11" onmouseover="Show_YKTab(1,1);">歌手</li>
        <li id="YKTabMu_12" onmouseover="Show_YKTab(1,2);">专辑</li>
        <li id="YKTabMu_13" onmouseover="Show_YKTab(1,3);">MV</li>
        <li id="YKTabMu_14" onmouseover="Show_YKTab(1,4);">排行</li>
    </ul>


    <div id="YKTabCon_10" class="YKTabCon">
        <div class="YKTabConB01">
           
            <ul class="YKTabConB01UL01">
                <li><a title="王啸坤《云上的日子》" href="http://music.sina.com.cn/yueku/m/293589.html" target="_blank">云上的日子</a></li>
               
                <li><a title="水木年华《借我一生》" href="http://music.sina.com.cn/yueku/m/309809.html" target="_blank">借我一生</a></li>
                <li><a title="汪峰《勇敢的心》" href="http://music.sina.com.cn/yueku/m/309856.html" target="_blank">勇敢的心</a></li>
                <li><a title="容祖儿《小小》" href="http://music.sina.com.cn/yueku/m/307126.html" target="_blank">小小</a></li>
            </ul>
        </div>
    </div>
    <div id="YKTabCon_11" class="YKTabCon" style="display:none;">
        <div class="YKTabConB01">
            <ul class="YKTabConB01UL01">
                <li><a href="http://music.sina.com.cn/yueku/s/158.html" target="_blank">陈绮贞</a></li>
                <li><a href="http://music.sina.com.cn/yueku/s/1228.html" target="_blank">孙燕姿</a></li>
                <li><a href="http://music.sina.com.cn/yueku/s/134.html" target="_blank">曹格</a></li>
                <li><a href="http://music.sina.com.cn/yueku/s/9430.html" target="_blank">樱桃帮</a></li>
            </ul>
        </div>
    </div>
    <div id="YKTabCon_12" class="YKTabCon" style="display:none;">
        <div class="YKTabConB01">
            <div class="YKTabConB01ImgB"><a href="http://music.sina.com.cn/yueku/a/28420.html" target="_blank"><img src="http://image2.sina.com.cn/ent/pc/2007-06-04/55/U1818P28T55D16176F921DT20070605035734.jpg" width="67" height="52" alt="樱桃帮《乖乖》"/><span>樱桃帮</span></a></div>
            <ul class="YKTabConB01UL01">
                <li><a   title="S.H.E《PLAY》" href="http://music.sina.com.cn/yueku/a/27827.html" target="_blank">PLAY</a></li>
                <li><a title="安以轩《I'm天秤座》" href="http://music.sina.com.cn/yueku/a/28208.html" target="_blank">I'm天秤座</a></li>
                <li><a title="周华健《雨人》" href="http://music.sina.com.cn/yueku/a/1346.html" target="_blank">雨人</a></li>
                <li><a title="王啸坤《同名专辑》" href="http://music.sina.com.cn/yueku/a/27245.html" target="_blank">王啸坤同名
                    </a></li>
            </div>
    </div>
    <div id="YKTabCon_13" class="YKTabCon" style="display:none;">
        <div class="YKTabConB01">
            <div class="YKTabConB01ImgB"><a href="http://music.sina.com.cn/yueku/v/302748.html" target="_blank"><img src="http://image2.sina.com.cn/ent/pc/2007-05-12/55/U1818P28T55D15500F919DT20070512001659.jpg" width="67" height="52" alt="S.H.E《五月天》"/><span>S.H.E</span></a></div>
            <ul class="YKTabConB01UL01">
                <li><a title="兄弟联《暗号》" href="http://music.sina.com.cn/yueku/v/287008.html" target="_blank">暗号</a></li>
                <li><a title="孙燕姿《Venus》" href="http://music.sina.com.cn/yueku/v/285149.html" target="_blank">Venus</a></li>
                <li><a   title="群星《听见了爱》" href="http://music.sina.com.cn/yueku/v/301624.html" target="_blank">听见了爱</a></li>
                <li><a title="陈奕迅《淘汰》" href="http://music.sina.com.cn/yueku/v/303789.html" target="_blank">淘汰</a></li>
            </ul>
        </div>
    </div>
    <div id="YKTabCon_14" class="YKTabCon" style="display:none;">
        <div class="YKTabConB01">
            <div class="YKTabConB01ImgB"><a href="http://music.sina.com.cn/yueku/a/8204.html" target="_blank"><img src="http://image2.sina.com.cn/ent/pc/2007-06-04/55/U1818P28T55D16176F924DT20070605040543.jpg" width="67" height="52" alt="黄雅莉"/><span>黄雅莉</span></a></div>
            <ul class="YKTabConB01UL01">
                <li><a href="http://music.sina.com.cn/yueku/rank/moreboard.php?topid=30000" target="_blank">乐库排行</a></li>
                <li><a href="http://music.sina.com.cn/yueku/rank/moreboard.php?topid=20001" target="_blank">新歌排行</a></li>
                <li><a href="http://music.sina.com.cn/yueku/rank/moreboard.php?topid=21000" target="_blank">MV排行</a></li>
                <li><a href="http://music.sina.com.cn/yueku/rank.shtml#href_2" target="_blank">无线排行</a></li>
            </ul>
        </div>
    </div>