时下网上非常流行那种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="飘零雾雨|edzmaster@gmail.com" /><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就搞定，这是不是能为你的页面节省不少空间呢：）
至于里面的代码就不做解释了，非常简单。只要知道了实现原理，大家自己基本都能搞定。
上次小古同学问了一下这个东东是如果实现的，那时比较忙，敷衍了一下他!- -今天补上。
