请问怎 做出类似于WINDOWS 显示属性那样 效果?

<html>
<head>
<title>Page Control</title><style type="text/css">
<!--
body,table,tr,td{font-size:12px;color:#000000;text-align:center;}
.sec1 {background-color: #99CC99;cursor: hand;color: #000000;border-left: 1px solid #FFFFFF;border-top: 1px solid #FFFFFF;border-right: 1px solid gray;border-bottom: 1px solid #FFFFFF}
.sec2 {background-color: #D4D0C8;cursor: hand;color: #000000;border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray;font-weight: bold; }
.main_tab {background-color: #D4D0C8;color: #000000;border-left:1px solid #FFFFFF;border-right: 1px solid gray;border-bottom: 1px solid gray;}
-->
</style>
<script language="JavaScript">
<!--
function secBoard(n,x,y)
{
    for(i=0;i<secTable.cells.length;i++)
    {
        secTable.cells[i].className="sec1";
    }
    secTable.cells[n].className="sec2";
    for(i=0;i<mainTable.tBodies.length;i++)
    {
        mainTable.tBodies[i].style.display="none";
    }
    mainTable.tBodies[n].style.display="block";
    //weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展馆<b>"+y+"</b>楼展厅";
}
//-->
</script>
</head><body>
<br><br>
<table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable>
  <tr height=20 align=center>
    <td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展馆1楼展厅</td>
    <td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展馆2楼展厅</td>
    <td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展馆1楼展厅</td>
    <td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展馆2楼展厅</td>
    <td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展馆1楼展厅</td>
    <td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展馆2楼展厅</td>
  </tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab>
<tbody style="display:block;">
  <tr>
    <td align="center"><br>
    一<br>
    </td>
  </tr>
</tbody>
<tbody style="display:none;">
  <tr>
    <td align="center"><br>
    二<br>
    </td>
  </tr>
</tbody>
<tbody style="display:none;">
  <tr>
    <td align="center"><br>
    三<br>
  </td>
  </tr>
</tbody>
<tbody style="display:none;">
  <tr>
    <td align="center"><br>
    四<br>
    </td>
  </tr>
</tbody>
<tbody style="display:none;">
  <tr>
    <td align="center"><br>
    五<br>
    </td>
  </tr>
</tbody>
<tbody style="display:none;">
  <tr>
    <td align="center"><br>
    六<br>
    </td>
  </tr>
</tbody>
</table></body></html>