网上流行的Div切换

时间：2007-06-10 来源：sdqdgaopeng

<style type="text/css">
#YueKu{width:287px; margin:0 auto; position:relative;}
.YKTiImg{width:82px; overflow:hidden; position:absolute; left:-1px; top:-7px;}
#YueKu h1{background:#FFF4CB; border-bottom:1px #FFBB1A solid; overflow:hidden; text-align:right; padding:0 9px 0 0; line- margin-bottom:6px;}
#YKTabs{ 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; overflow:hidden; background:url(http://image2.sina.com.cn/home/07index/sinahome_070309_ws_011.gif) no-repeat; text-align:center; line- 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{ 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; overflow:hidden; clear:both;}
.YKNameList{clear:both; 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; line- 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; overflow:hidden; font-size:12px; text-align:center; color:#000; margin:0 0 0 4px; cursor:pointer;}
</style>

<div id="YueKu">


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

   </ul>

  </div>

</div>
<div id="YKTabCon_11" class="YKTabCon" style="display:none;">
  <div class="YKTabConB01">

  </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="周华健《雨人》" 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>

</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>