合页效果

 

<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' οnmοuseοver='ShowTabs(0)'><a href="#">软件简介</a></td>
  <td class='menu_title' id='TabTitle' οnmοuseοver='ShowTabs(1)'><a href="#">详细资料</a></td>
  <td class='menu_title' id='TabTitle' οnmοuseοver='ShowTabs(2)'><a href="#">相关软件</a></td>
  <td class='menu_title' id='TabTitle' οnmοuseοver='ShowTabs(3)'><a href="#">成功案例</a></td>
  <td class='menu_title' id='TabTitle' οnmοuseοver='ShowTabs(4)'><a href="#">下载说明</a></td>
  <td class='menu_title' id='TabTitle' οnmοuseοver='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>

http://blog.ccun.com.cn/html/trackback.do?id=40&type=1