<style type="text/css">
<!--
#Tab1{
width:482px;
margin:0px;
padding:0px;
margin:0 auto;}
/*菜單class*/
.Menubox {
width:100%;
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
float:left;
display:block;
cursor:pointer;
width: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; width:85px; height:35px; }
.hover1{
?background:url(images/index_03.gif) no-repeat center; width:85px; height:35px;
}
.one2{ background:url(images/index_04.gif) no-repeat center; width:85px; height:35px;}
.hover2{
?background:url(images/index_04_01.gif) no-repeat center; width: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=" width:5px; height:35px"><img src="images/index_01.gif"></li>
<li id="one1" class="hover1"? οnmοuseοver="setTab('one',1,4)"></li>
<li id="one2" class="one2" οnmοuseοver="setTab('one',2,4)" ></li>
<li style="width: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/archive/2009/05/07/1451437.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Tab菜单切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。