JS+CSS 导航条显示数据库数据

js部分

<script>
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
}
</script>

CSS部分

.bjjg{width:506px;margin-left:8px;background-color:#FFFFFF;float:left;}

.bjjg .Title p.noticeZb{width:90px;height:33px;line-height:33px;background:url(../images/img_zb1.gif) no-repeat left;color:#2048A3;font-size:14px; font-weight:bold; padding-left:32px; float:left}

.bjjg .Title p.tabZb{line-height:33px;font-size:14px;float:left;}

.bjjg .Title{width:auto;height:33px;background:url(../images/index_spgsjg.gif) repeat-x;border-right:#B2CEE4 1px solid;padding-right:10px;line-height:33px;}

.bjjg .Project .header{width:100%;height:26px; background-color:#EDF9FF;text-align:center; border-collapse:collapse;}


.bjjg .Project .header .date{width:90px;background:url(../images/project_ico.gif) no-repeat left;}

.bjjg .Project .header td{border:#B2CEE4 1px solid;border-right:none;border-top:none;}

页面部分

<div class="bjjg">
				<div class="Title">
					<p class="noticeZb">
						效果结果
					</p>
                    <p class="tabZb">
						<a href="#" id="zb1" onmouseover="setTab('zb',1,5)" >1</a> <!-- 导航部分 第一个就是效果结果的默认显示，点效果结果就是点的这个-->
						<a href="#" id="zb2" onmouseover="setTab('zb',2,5)">2</a> 
						<a href="#" id="zb3" onmouseover="setTab('zb',3,5)">3</a> 
						<a href="#" id="zb4" onmouseover="setTab('zb',4,5)">4</a> 
						<a href="#" id="zb5" onmouseover="setTab('zb',5,5)">5</a>
					</p>
				</div>
				<div class="Project" id="con_zb_1" style="height:120px;clear:both;">
					<table width="100%" border="0" cellpadding="0" cellspacing="0"
						class="header" name="wusuowei">
						<tr>
							<td width="21%" style="border-left:none;">
								效果1<!--这个是一个数据属性的名字，随便写 -->
							</td>
							<td width="18%">
								效果2<!--这个是一个数据属性的名字，随便写 -->
							</td>
							<td width="10%">
								效果3<!--这个是一个数据属性的名字，随便写 -->

							</td>
                            <td width="12%">
								效果4<!--这个是一个数据属性的名字，随便写 -->
							</td>
                            <td width="12%">
								效果5<!--这个是一个数据属性的名字，随便写 -->
							</td>
                            <td width="11%">
								效果6<!--这个是一个数据属性的名字，随便写 -->

							</td>
                            <td width="10%">
								效果7<!--这个是一个数据属性的名字，随便写 -->
							</td>
						</tr>
					</table>
					<marquee onmouseover=this.stop() direction="up"
						onmouseout=this.start() scrollAmount=2 scrollDelay=100
						height="95">
					<table width="100%" border="0" cellpadding="0" cellspacing="1"
						class="Data">
						<ww:iterator value="allowList"><!--这里是迭代数据，这个看自己怎么定义的标签 -->
							<tr>
								<td width="23%">
								       <!-- 这里放值-->
								</td>
								<td width="18%">
                            <!-- 这里放值-->						                                                     </td>
								<td width="12%">
	                   <!-- 这里放值-->
	                                                      </td>
                                <td width="12%">
								<!-- 这里放值-->

							</td>
                            <td width="13%">
								<!-- 这里放值-->
							</td>
                            <td width="13%">
								<!-- 这里放值-->
							</td>
                            <td width="13%">
								<!-- 这里放值-->
							</td>
							</tr>
						</ww:iterator>
					</table>
					</marquee>

                   </div>
<!--下面接着写4个marquee 分别对应相应的操作 -->

                   </div>