作者:王思之 教程来源:动易论坛 点击数: 更新时间:2007-1-12 【字体:
小 大】
效果:
| 软件简介软件简介 |
| 详细资料详细资料 |
| 相关软件相关软件 |
| 成功案例成功案例 |
| 下载说明下载说明 |
| 网友评论网友评论 |
代码:
<style type="text/css">
td{font-size:13px;}
a{text-decoration:none;color:#333;}
.menu_title{background:#ccc;}
.menu_title_on{background:#eee;}
.menu_title_on a{color:red;}
</style>
<SCRIPT language=JavaScript>
var tID=0;
function ShowTabs(ID){
if(ID!=tID){
TabTitle[tID].className='menu_title';
TabTitle[ID].className='menu_title_on';
Tabs[tID].style.display='none';
Tabs[ID].style.display='';
tID=ID;
}
}
</SCRIPT>
<table width="100%" border="1">
<tr align="center">
<td class='menu_title_on' id='TabTitle' onmouseover='ShowTabs(0)'><a href="#">软件简介</a></td>
<td class='menu_title' id='TabTitle' onmouseover='ShowTabs(1)'><a href="#">详细资料</a></td>
<td class='menu_title' id='TabTitle' onmouseover='ShowTabs(2)'><a href="#">相关软件</a></td>
<td class='menu_title' id='TabTitle' onmouseover='ShowTabs(3)'><a href="#">成功案例</a></td>
<td class='menu_title' id='TabTitle' onmouseover='ShowTabs(4)'><a href="#">下载说明</a></td>
<td class='menu_title' id='TabTitle' onmouseover='ShowTabs(5)'><a href="#">网友评论</a></td>
</tr>
</table>
<table width="100%" border="1" align="center">
<tr id='Tabs' style='display:'>
<td height="100" valign="top">软件简介软件简介</td>
</tr>
<tr id='Tabs' style='display: none;'>
<td height="100" valign="top">详细资料详细资料</td>
</tr>
<tr id='Tabs' style='display: none;'>
<td height="100" valign="top">相关软件相关软件</td>
</tr>
<tr id='Tabs' style='display: none;'>
<td height="100" valign="top">成功案例成功案例</td>
</tr>
<tr id='Tabs' style='display: none;'>
<td height="50" valign="top">下载说明下载说明</td>
</tr>
<tr id='Tabs' style='display: none;'>
<td height="100" valign="top">网友评论网友评论</td>
</tr>
</table>
说明:本效果在FireFox浏览器下无效。同时请参阅如何实现动易官方网站内容页的移动菜单效果?一文以获得更多启示。