合頁效果

 

<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