寬度可以伸縮的選項卡，來自網易

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   id="iwvjtn8m0"   class="wrap" id=divspacerank>     <div   id="iwvjtn8m0"   class=md-head id=blogs_spacerank>     今天      72小時      一周排行 <BR class=clear>     </DIV>     <div   id="iwvjtn8m0"   class=md-body>          <div   class="iwvjtn8m0"   id=blogs_spacerank_0>               今日更新          </DIV>          <div   class="iwvjtn8m0"   id=blogs_spacerank_1 style="DISPLAY: none">                72小時         </DIV>         <div   class="iwvjtn8m0"   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導航欄