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


    代码简介:

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

    代码内容:

    <html>
    <head>
    <title>来自163的一款宽度可以伸缩的选项卡菜单_网页代码站(www.webdm.cn)</title>
    <style>
    HTML,BODY {
    	margin:30px;padding:0;border:none;font-size:14px
    }
    .wrap {
    	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="/">网页代码站</A> 
         <A class="a10 wrap" id=blogs_spacerank_tab_1 hideFocus onClick="blogs_spacerank_ck(1);return false;" href="/">72小时</A> 
         <A class="a10 wrap" id=blogs_spacerank_tab_2 hideFocus onClick="blogs_spacerank_ck(2);return false;" href="/">一周</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

  • 相关阅读:
    GridView与ArrayAdapter的结合
    翻翻git之---闪烁动画的TextView RevealTextView
    希捷硬盘扩容软件-----DiscWizard
    项目管理的酸甜苦辣
    【转】Bootloader之uBoot简介(转)
    【转】uboot移植(一)BootLoader基本概念
    【转】U-boot分析与移植(1)----bootloader分析
    【转】MIPS交叉编译环境的建立
    【转】RTSP实例解析
    【转】Eclipse快捷键 10个最有用的快捷键----不错
  • 原文地址:https://www.cnblogs.com/webdm/p/1954881.html
Copyright © 2020-2023  润新知