時下網上非常流行那種tabStrip的效果，只要不濫用，確實可以爲網站增色不少。
就我個人來講，也覺得這是一個非常好的技術：
①讓頁面更美觀，結構更緊湊；
②效果更吸引人；
③最重要的就是節省了很多“地方”。
以前一個內容比較多的頁面，拉了半天滾動條也拉不到底，想找個自己感興趣的東東似乎也得花些時間。而使用了tabStrip的頁面，就可以爲你省下拉滾動條的時間去找自己感興趣的內容。
趁下午有點空閒時間，就寫了個簡單的tabStrip例子：
［演示地址：http://www.doyoe.com/model/tabstrip/tabstrip1/1.htm］
CSS部分：
html,body {
font:12px Verdana,Arial;
margin:50px;
}
a {
text-decoration:none;
}
.dymenu {
width:350px;
overflow:hidden;
border-bottom:3px solid #6f6f6f;
line-height:22px;
}
.dymenu h3 {
margin:0 35px 0 5px;
font-size:12px;
color:#f87106;
float:left;
}
.dymenu a {
height:22px;
padding:0 10px;
margin-left:1px;
background-color:#dcdcdc;
color:#363636;
float:left;
}
.dylist {
width:348px;
border:1px solid #ddd;
margin:5px 0 0 0;
padding:5px 0;
list-style:none;
display:none;
}
.dylist li {
padding:3px 8px;
}
.dylist li a {
padding-left:10px;
color:#363636;
background:url(point_01.gif) 0 5px no-repeat;
}
.dylist li a:hover {
color:#517c11;
background-position: 0 -10px;
border-bottom:1px dashed #517c11;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飄零霧雨|[email protected]" />
<title>DY Js & Css tabStrip</title>
</head>
<body>
<div class="dymenu">
<h3>傳說中的tabStrip</h3>
<a href="#" id="link1" οnmοuseοver="showtitle(this,getElementById('dynra'));">內容一</a>
<a href="#" id="link2" οnmοuseοver="showtitle(this,getElementById('dynrb'));">內容二</a>
<a href="#" id="link3" οnmοuseοver="showtitle(this,getElementById('dynrc'));">內容三</a>
</div>
<ul id="dynra" class="dylist">
<li><a href="#1">傳說中的tabStrip實驗內容一</a></li>
<li><a href="#1">文章列表一</a></li>
<li><a href="#1">文章列表一</a></li>
<li><a href="#1">文章列表一</a></li>
<li><a href="#1">文章列表一</a></li>
</ul>
<ul id="dynrb" class="dylist">
<li><a href="#2">傳說中的tabStrip實驗內容二</a></li>
<li><a href="#2">文章列表二</a></li>
<li><a href="#2">文章列表二</a></li>
<li><a href="#2">文章列表二</a></li>
<li><a href="#2">文章列表二</a></li>
</ul>
<ul id="dynrc" class="dylist">
<li><a href="#3">傳說中的tabStrip實驗內容三</a></li>
<li><a href="#3">文章列表三</a></li>
<li><a href="#3">文章列表三</a></li>
<li><a href="#3">文章列表三</a></li>
<li><a href="#3">文章列表三</a></li>
</ul>
</body>
</html>
JS部分：
var currentObja = document.getElementById("link1");
var currentObjb = document.getElementById("dynra");
function showtitle(obja,objb){
obja.style.backgroundColor = '#6f6f6f';
obja.style.color = '#fff';
objb.style.display = "block";
if(currentObja != null && currentObjb != null && currentObja != obja && currentObjb != objb){
currentObja.style.backgroundColor = '#dcdcdc';
currentObja.style.color = '#363636';
currentObjb.style.display = 'none';
}
currentObja = obja;
currentObjb = objb;
}
showtitle(currentObja,currentObjb);
從例子中可以看出，換作以前，一般在不用tabStrip的情況下，這些內容所佔頁面的“地方”會是現在的三倍，而現在只需以前的1/3就搞定，這是不是能爲你的頁面節省不少空間呢：）
至於裏面的代碼就不做解釋了，非常簡單。只要知道了實現原理，大家自己基本都能搞定。
上次小古同學問了一下這個東東是如果實現的，那時比較忙，敷衍了一下他!- -今天補上。