<!DOCTYPE html>
<html>
<body>
<script>
function hideAll() {
for(i=0;i<odiv.length;i++) {
odiv[i].style.display="none";
}
}
function showObj(num) {
if (odiv[num].style.display=="none") {
hideAll();
odiv[num].style.display="inline";
}
else {
odiv[num].style.display="none";
}
}
</script>
<table>
<tr >
<td>
<a href="#" onclick="showObj(0)">菜单一</a><br>
<div id="odiv" style="display:none">l1<br>l2<br>l3</div>
</td>
</tr>
<tr >
<td>
<a href="#" onclick="showObj(1)">菜单二</a><br>
<div id="odiv" style="display:none">l11<br>l12<br>l13</div>
</td>
</tr>
<tr >
<td>
<a href="#" onclick="showObj(2)">菜单三</a><br>
<div id="odiv" style="display:none">l111<br>l112<br>l113</div>
</td>
</tr>
</table>
</body>
</html>
DIV元素:是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV标签应用于 Style Sheet（样式表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class、Style、title、ID 等属性。
备注:
<table>代表表格</table>
<tr>代表表格中的一行</tr>
<td>代表表格中的一列</td>
'tr'与'td'交成一个单元格
<table>...</table>之间有多少个<tr>，就有多少行
<tr>...</tr>之间有多少个<td>，就有多少列
效果图：
