选项卡可在有限的空间内显示多项内容，本文使用无序列表和Div实现了一种选项卡，这种方式的重点在于li子节点的类别，宽度，背景和下边框的设置，具体方式请参照代码。
效果图如下：
全部代码：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>选项卡示例</title>
<style type="text/css">
<!--
#outerDiv{
width:400px;
}
#tabBar{
width:400px;
margin:0px;
}
#tabBar ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#tabBar li{
float:left;
display:block;
height:25px;
}
#tabBar li.leftBlank{
width:20px;
border-bottom:1px solid #7297c1;
}
#tabBar li a{
width:50px;
line-height:25px;
font-size:15px;
color:#ffffff;
text-decoration:none;
text-align:center;
background:#ffffff url(img/tabs.gif) 0px 0px;
}
#tabBar li a.current{
width:50px;
color:#1e3668;
font-weight:bold;
background:#ffffff url(img/tabs.gif) -50px 0px;
}
#tabBar li.rightBlank{
width:180px;
border-bottom:1px solid #7297c1;
}
#downDiv{
width:400px;
height:150px;
border-left:1px solid #7297c1 ;
border-right:1px solid #7297c1 ;
border-bottom:1px solid #7297c1 ;
text-align:center;
padding:10px;
font-family:隶书;
font-size:14pt;
}
-->
</style>
</head>
<body>
<div>
</div>
<div id="outerDiv">
<div id="tabBar">
<ul>
<li class="leftBlank"></li>
<li><a href="#" class="current">李白</a></li>
<li><a href="#">杜甫</a></li>
<li><a href="#">苏轼</a></li>
<li><a href="#">李煜</a></li>
<li class="rightBlank"></li>
</ul>
</div>
<div id="downDiv">
赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。眼花耳热后，意气紫霓生。
救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。
</div>
</div>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
// -- 按id取得元素
function $(id){
return document.getElementById(id);
}
// -- 清除现有菜单项
function refreshCurrent(){
var ul=$("tabBar").firstChild;
// 这里注意下标
for(var i=1;i<ul.childNodes.length-1;i++){
ul.childNodes[i].firstChild.className="";
}
}
// -- 容纳内容的全局数组
var arr;
window.onload=function(){
arr=new Array;
arr[0]="赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星.十步杀一人，千里不留行。事了拂衣去，深藏身与名。闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。三杯吐然诺，五岳倒为轻。眼花耳热后，意气紫霓生。三杯吐然诺，五岳倒为轻。眼花耳热后，意气紫霓生。救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。";
arr[1]="风急天高猿啸哀， 渚清沙白鸟飞回。 无边落木萧萧下， 不尽长江滚滚来。 万里悲秋常作客， 百年多病独登台。 艰难苦恨繁霜鬓， 潦倒新停浊酒杯。";
arr[2]="大江东去，浪淘尽，千古风流人物。故垒西边，人道是：三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。 江山如画，一时多少豪杰。 遥想公瑾当年，小乔初嫁了，雄姿英发。 羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。 人生如梦，一尊还酹江月。";
arr[3]="四十年来家国,三千里地山河.凤阁龙楼连霄汉,玉树琼枝作烟萝.几曾识干戈.一旦归为臣虏,沈腰潘鬓消磨.最是仓皇辞庙日,教坊犹奏别离歌,垂泪对宫娥.";
var ul=$("tabBar").firstChild;
// 这里注意下标
for(var i=1;i<ul.childNodes.length-1;i++){
new function(){
var a=ul.childNodes[i].firstChild;
var index=i;
a.attachEvent("onclick",
function(){
refreshCurrent();
a.className="current";
$("downDiv").innerHTML=arr[index-1];
}
);
}
}
}
//-->
</SCRIPT>
代码下载：
http://www.blogjava.net/Files/heyang/tab20090828205420.rar