通过CSS和DIV创建TAB标签页

通过CSS和TAB创建一个简单的TAB标签页
样式简单，清新，可以放在表格中使用的

样式如下：

a {
color:#000000;
text-decoration:none;
}
#navbar {

}
#header {
float:left;
width:100%;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0px;
list-style:none;
}
#header li {
float:left;
background:#DCE1EF;
border:solid 1px #8EA2C2;
margin-left:0px;
padding:0px;
width:48%;
}
#header a {
display:block;
padding:5px 15px 4px;
}
#header .current {
background:#FFFFFF;
border-left:solid 1px #8EA2C2;
border-top:solid 1px #8EA2C2;
border-right:solid 1px #8EA2C2;
border-bottom:solid 0px #8EA2C2;

}
#header .current a{
padding-bottom:5px;
}
.content {
margin-top:2px;
}
.content .contentMain {
text-align:left;
}

在将以下DIV放入到制定区域就可以了
<div id="navbar" style="width:100%">
<div id="header">
<ul>
<li id="current1"><a href="#" onclick="change_option(2,1);">热门车型</a></li>
<li id="current2"><a href="#" onclick="change_option(2,2);">新产品介绍</a></li>
</ul>
</div>
<div id="content1" class="content">
<div class="contentMain">
<c:forEach items="${listHot}" var="hot" end="15">
<a href="#" onclick="toView('<bean:write name="hot" property="intellectHotVO.prodfamId"/>','<bean:write name="hot" property="intellectHotVO.prodfamDesc"/>')">
<bean:write name="hot" property="intellectHotVO.prodfamDesc"/>-<bean:write name="hot" property="intellectHotVO.verValueText"/>
</a> <br />
</c:forEach>
</div>
</div>
<div id="content2" class="content" style="display:none">
<div class="contentMain">
<c:forEach items="${listNew}" var="new" end="15">
<a href="#" onclick="toView('<bean:write name="new" property="intellectHotVO.prodfamId"/>','<bean:write name="new" property="intellectHotVO.prodfamDesc"/>')">
<bean:write name="new" property="intellectHotVO.prodfamDesc"/>-<bean:write name="new" property="intellectHotVO.verValueText"/>
</a> <br />
</c:forEach>
</div>
</div>
</div>

当然了，为了让TAB切换，还需要一点点JS
function change_option(number,index){
for (var i = 1; i <= number; i++) {
document.getElementById('current' + i).className = '';
document.getElementById('content' + i).style.display = 'none';
}
document.getElementById('current' + index).className = 'current';
document.getElementById('content' + index).style.display = 'block';
}