通过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="#" οnclick="change_option(2,1);">热门车型</a></li>
				    <li id="current2"><a href="#" οnclick="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="#" οnclick="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="#" οnclick="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';
}