Tab菜单切换效果

<style type="text/css">
<!--
#Tab1{
482px;
margin:0px;
padding:0px;
margin:0 auto;}
/*菜单class*/
.Menubox {
100%;
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
float:left;
display:block;
cursor:pointer;
85px;
}
.Contentbox{
clear:both;
margin-top:-4px;
border:1px solid #E5E1D5;
border-top:none;
height:150px;
text-align:center;
padding-top:10px;
border-bottom:none;
}
.one1{ background:url(images/index_03_01.gif) no-repeat center; 85px; height:35px; }
.hover1{
 background:url(images/index_03.gif) no-repeat center; 85px; height:35px;
}
.one2{ background:url(images/index_04.gif) no-repeat center; 85px; height:35px;}
.hover2{
 background:url(images/index_04_01.gif) no-repeat center; 85px; height:35px;
}
-->
</style>
<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"+i:"one"+i;
 con.style.display=i==cursel?"block":"none";

}
}
//-->
</script>


 

<div id="Tab1">
<div class="Menubox">
<ul>
<li style=" 5px; height:35px"><img src="images/index_01.gif"></li>
<li id="one1" class="hover1"  onmouseover="setTab('one',1,4)"></li>
<li id="one2" class="one2" onmouseover="setTab('one',2,4)" ></li>
<li style="303px; height:35px"><img src="images/index_02.gif"></li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1" class="hover">
<%
 reval=""
 reval = reval & "<table width=440 border=0 align=center cellpadding=0 cellspacing=0>" & vbCrlf
 reval = reval & "<tr>" & vbCrlf
 reval = reval & "<td width=""110""><img src={imgname} width=92 height=63 /></td>" & vbCrlf
 reval = reval & "<td><span class=font2>{title}</span><br />{summary}<a href={link}>详细&gt;&gt; </a></td>" & vbCrlf
 reval = reval & "</tr>" & vbCrlf
 reval = reval & "</table>" & vbCrlf
 response.Write GetTopNews(reval,"ctlgid=3 and not(imgname is null)","newshow.asp",1,50,50)
%>
<table width="446" border="0" align="center" cellpadding="0" cellspacing="0" class="table2">
                    <tr>
                      <td>&nbsp;</td>
                    </tr>
                  </table>
               <%
    reval2=""
    reval2 = reval2 & "<table width=450 border=0 align=center cellpadding=0 cellspacing=0>" & vbCrlf
    reval2 = reval2 & "<tr>" & vbCrlf
    reval2 = reval2 & "<td width=20><div align=center><img src=images/index_28.gif width=3 height=5 /></div></td>" & vbCrlf
    reval2 = reval2 & "<td><a href={link}>{title}</a></td>" & vbCrlf
    reval2 = reval2 & "<td width=80 class=font1>[{edittime}]</td>" & vbCrlf
    reval2 = reval2 & "</tr>" & vbCrlf
    reval2 = reval2 & "</table>" & vbCrlf
    response.Write GetTopNews(reval2,"ctlgid=3 and (imgname is null)","newshow.asp",4,50,"")
    %>

</div>
<div id="con_one_2" style="display:none">
<%
 response.Write GetTopNews(reval,"ctlgid=4 and not(imgname is null)","newshow.asp",1,50,50)
%>
<table width="446" border="0" align="center" cellpadding="0" cellspacing="0" class="table2">
                    <tr>
                      <td>&nbsp;</td>
                    </tr>
                  </table>
               <%
    response.Write GetTopNews(reval,"ctlgid=4 and (imgname is null)","newshow.asp",4,50,"")
    %>

</div> 
</div>
</div>

原文地址:https://www.cnblogs.com/zlmlovem/p/1451437.html