来自163的一款宽度可以伸缩的选项卡菜单

时间：2011-02-15 来源：网页代码站

宽度可以伸缩的选项卡，来自网易，清新的淡蓝色风格，点击切换，内容框可以是列表和文字，JS+css共同打造，希望朋友们喜欢。

代码内容：

<html>
<head>
<title>来自163的一款宽度可以伸缩的选项卡菜单_网页代码站(www.webdm.cn)</title>
<style>
HTML,BODY {
        margin:30px;padding:0;border:none;font-size:14px
}
.wrap {
        width:300px; BORDER: #b7c5d9 1px solid;BACKGROUND: #f0f6f9
}
.a10 {
        FONT-WEIGHT: bold; COLOR: #0099cc;  TEXT-DECORATION: none;
}
.a10:hover {
        COLOR: #bb2233; TEXT-DECORATION: underline
}
.md-head {
        PADDING-LEFT: 0px; LINE-HEIGHT: 38px; HEIGHT: 38px
}
.md-head A {
        BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 1px; FLOAT: left; BORDER-BOTTOM-WIDTH: 1px; MARGIN-LEFT: -1px; WIDTH: 76px; BACKGROUND-COLOR: 

#fff; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px
}
.md-head A.wid {
        WIDTH: 148px
}
.md-head A.cur {
         BORDER-BOTTOM-WIDTH: 0px; COLOR: #000; BACKGROUND-COLOR: #f0f6f9; TEXT-DECORATION: none
}
.md-body {
        padding:15px;ZOOM: 1
}
a,area { blr:e-xpression(this.onFocus=this.blur()) }
:focus { -moz-outline-style: none; } 
</style>
</HEAD>
<BODY>
<DIV class="wrap" id=divspacerank>
     <DIV class=md-head id=blogs_spacerank>
     <A class="a10 wrap cur wid" id=blogs_spacerank_tab_0 hideFocus onClick="blogs_spacerank_ck(0);return false;" href="http://www.cnblogs.com/">网页代码站</A> 
     <A class="a10 wrap" id=blogs_spacerank_tab_1 hideFocus onClick="blogs_spacerank_ck(1);return false;" href="http://www.cnblogs.com/">72小时</A> 
     <A class="a10 wrap" id=blogs_spacerank_tab_2 hideFocus onClick="blogs_spacerank_ck(2);return false;" href="http://www.cnblogs.com/">一周</A> <BR class=clear>
     </DIV>
     <DIV class=md-body>
          <DIV id=blogs_spacerank_0>
               www.webdm.cn最新更新的内容
          </DIV>
          <DIV id=blogs_spacerank_1 style="DISPLAY: none">
                72小时空间排行内容
         </DIV>
         <DIV id=blogs_spacerank_2 style="DISPLAY: none">
                一周空间排行内容
         </DIV>
        </DIV>
</DIV>
<SCRIPT>
         var blogs_spacerank_index = 0,blogs_spacerank_class = 'a10 wrap ';
         var blogs_spacerank_list = document.getElementById('blogs_spacerank').getElementsByTagName('a');
         function blogs_spacerank_ck(_idx){
                blogs_spacerank_list[blogs_spacerank_index].className = blogs_spacerank_class;
                blogs_spacerank_list[_idx].className = blogs_spacerank_class + ' cur wid';
                document.getElementById('blogs_spacerank_'+blogs_spacerank_index).style.display = 'none';
                document.getElementById('blogs_spacerank_tab_'+blogs_spacerank_index).innerHTML = document.getElementById

('blogs_spacerank_tab_'+blogs_spacerank_index).innerHTML.replace("空间排行","");
                document.getElementById('blogs_spacerank_'+_idx).style.display = 'block';
                document.getElementById('blogs_spacerank_tab_'+_idx).innerHTML = document.getElementById('blogs_spacerank_tab_'+_idx).innerHTML+"

空间排行";
                blogs_spacerank_index = _idx;
         }                                                                                                      
</SCRIPT>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/488710d3-4b69-473c-9a45-78af4953d589.html