由于现在互联网络展示的信息量大，为了尽可能的在页面上展示更多的内容，并结合VSB2008网站综合管理系统，下面给大家介绍制作网页标签切换的效果。首先一般网站页面上彼岸前切换的效果如图1和2。
图1 图2
要实现上图样式的效果，要在页面中插入下面的代码：
<style type="text/css">
<!--
.STYLE1 {font-size: 10pt}
}
.table_border {
background-image: url(images/xian-21.gif);
background-repeat: repeat-x;
background-position: top;
border: 1px solid #D3D3D3;
}
.STYLE2 {font-size: 10pt; color: #006699; }
-->
</style>
</head>
<body>
<table width="266" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="150"><table height="21" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tbody>
<tr>
<td width="266" valign="bottom"><table cellspacing="0" cellpadding="0" width="266" border="0">
<tbody>
<tr>
<td width="83"><table height="30" cellspacing="0" cellpadding="0" width="83" border="0">
<tbody>
<tr>
<td id="1_1" style="BACKGROUND: url(%E9%A1%B5%E9%9D%A2%E6%A0%8F%E7%9B%AE%E5%88%87%E6%8D%A2%E6%95%88%E6%9E%9C/images/here.gif)" width="83" background="页面栏目切换效果/images/here.gif"><div align="center" class="STYLE1"><span id="td_1_1" onmouseover="showtab(1,1,4)" style="COLOR: #000000;cursor: hand">项目计划</span></div></td>
</tr>
</tbody>
</table></td>
<td width="7"> </td>
<td width="85"><table height="30" cellspacing="0" cellpadding="0" width="83" border="0">
<tbody>
<tr>
<td id="1_2" style="BACKGROUND: url(%E9%A1%B5%E9%9D%A2%E6%A0%8F%E7%9B%AE%E5%88%87%E6%8D%A2%E6%95%88%E6%9E%9C/images/there.gif)" width="85" background="页面栏目切换效果/images/there.gif"><div align="center" class="STYLE2"><span id="td_1_2" onmouseover="showtab(1,2,4)" style="cursor: hand">项目进展</span></div></td>
</tr>
</tbody>
</table></td>
<td> </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table class="table_border" height="112" cellspacing="2" cellpadding="2" width="100%" align="center" border="0">
<tbody>
<tr>
<td width="73%"><table id="tab_1_1" height="100%" cellspacing="5" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td valign="top" width="74%">1月项目计划 </td>
</tr>
</tbody>
</table>
<table id="tab_1_2" style="DISPLAY:none " height="100%" cellspacing="5" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td valign="top" width="74%">2月项目计划</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script language="JavaScript" type="text/javascript">
function showtab(m,n,count){
var strPic1="url(images/here.gif)";
var strPic2="url(images/there.gif)";
for(var i=1;i<=count;i++)
{
if (i==n){
getObject(m+'_'+i).style.background=strPic1;
getObject('td_'+m+'_'+i).style.color='#000000';
getObject('tab_'+m+'_'+i).style.display='';
}
else {
getObject(m+'_'+i).style.background=strPic2;
getObject('td_'+m+'_'+i).style.color='#000000';
getObject('tab_'+m+'_'+i).style.display='none';
}
}
}
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}
</script></td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
然后根据个人的实际情况，添加table并设置名称和样式。制作样例在文章的附件中，可供大家下载学习。
