简单写了个时下比较流行的tabStrip-优快云博客

本文介绍了一种网页设计中流行的TabStrip效果实现方法，通过CSS、XHTML和JS代码展示了如何节省页面空间并使内容更加紧凑美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时下网上非常流行那种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" onmouseover="showtitle(this,getElementById('dynra'));">内容一</a>
<a href="#" id="link2" onmouseover="showtitle(this,getElementById('dynrb'));">内容二</a>
<a href="#" id="link3" onmouseover="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就搞定，这是不是能为你的页面节省不少空间呢：）

至于里面的代码就不做解释了，非常简单。只要知道了实现原理，大家自己基本都能搞定。

上次小古同学问了一下这个东东是如果实现的，那时比较忙，敷衍了一下他!- -今天补上。