通过CSS和DIV创建TAB标签页

来源：互联网发布：改变电话号码的软件编辑：程序博客网时间：2024/05/09 19:58

通过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';}