来自163的一款宽度可以伸缩的选项卡菜单
代码简介:
宽度可以伸缩的选项卡,来自网易,清新的淡蓝色风格,点击切换,内容框可以是列表和文字,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="/">网页代码站</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