宽度可以伸缩的选项卡，来自网易

2024-09-05 12:19:58

字体：大中小

来源：转载

供稿：网友

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

<html><head><TITLE>宽度伸缩选项卡</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>     今天      72小时      一周排行 <BR class=clear>     </DIV>     <DIV class=md-body>          <DIV id=blogs_spacerank_0>               今日更新          </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>

上一篇：展开、折叠的垂直两级菜单，可用到后台左侧

下一篇：鼠标滑过字体加粗、背景变色的CSS导航栏

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注