三种菜单的显示/隐藏

<SCRIPT language="javascript" type="text/javascript">
<!--
//方式一:不用循环,类似动网后台菜单
function MM_ShowSublist(whichItem) {
var theSublist = document.getElementById ("MM_sublist" +whichItem)
if (theSublist.style.display == "none")
theSublist.style.display = "block";
else
theSublist.style.display = "none";
}

//方式二:使用循环,基于方式一的
function MM_ShowSublist2(f,val){
for(var i=1;i<=f;i++){
if(val == i){
document.getElementById("MM_sublist2" + i).style.display="";
}else{
document.getElementById("MM_sublist2" + i).style.display="none";
}
}
}



//方式三:点击一个菜单后,其他菜单会收缩,方便长的菜单
function MM_ShowSublist3(f,val){
for(i=1;i<=f;i++){
document.getElementById("MM_sublist3" + i).style.display="none";
document.getElementById("MM_sublist3" + val).style.display="block";
}
}
//-->
</SCRIPT>

<table id="1" cellspacing="0" cellpadding="0" align="center" width="200" border="1">
<tr>
<td height="8">第1个表格</td>
</tr>
<tr style="CURSOR: hand" onclick="MM_ShowSublist(1)">
<td><strong>聊 天</strong></td>
</tr>
<tr id="MM_sublist1">
<td>碧聊<br>
新浪聊天<br>
网易聊天</td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr style="CURSOR: hand" onclick="MM_ShowSublist(2)">
<td><strong>游 戏</strong></td>
</tr>
<tr id="MM_sublist2" style="DISPLAY: none">
<td>17173<br>
新浪游戏<br>
太平洋游戏</td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr style="CURSOR: hand" onclick="MM_ShowSublist(3)">
<td><strong>下 载</strong> </td>
</tr>
<tr id="MM_sublist3" style="DISPLAY: none">
<td>华军软件<br>
天空软件<br>
霏凡软件站</td>
</tr>
<tr>
<td height="8"></td>
</tr>
</table>

<hr>
<table id="2" cellspacing="0" cellpadding="0" align="center" width="200" border="1">
<tr>
<td height="8">第2个表格</td>
</tr>
<tr style="CURSOR: hand" onclick="MM_ShowSublist2(3,1)">
<td><strong>聊 天</strong></td>
</tr>
<tr id="MM_sublist21">
<td>碧聊<br>
新浪聊天<br>
网易聊天</td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr style="CURSOR: hand" onclick="MM_ShowSublist2(3,2)">
<td><strong>游 戏</strong></td>
</tr>
<tr id="MM_sublist22" style="DISPLAY: none">
<td>17173<br>
新浪游戏<br>
太平洋游戏</td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr style="CURSOR: hand" onclick="MM_ShowSublist2(3,3)">
<td><strong>下 载</strong> </td>
</tr>
<tr id="MM_sublist23" style="DISPLAY: none">
<td>华军软件<br>
天空软件<br>
霏凡软件站</td>
</tr>
<tr>
<td height="8"></td>
</tr>
</table>

<hr>
<table id="3" cellspacing="0" cellpadding="0" align="center" width="200" border="1">
<tr>
<td height="8">第3个表格</td>
</tr>
<tr style="CURSOR: hand" onclick="MM_ShowSublist3(5,1)">
<td><strong>聊 天</strong></td>
</tr>
<tr id="MM_sublist31">
<td>碧聊<br>
新浪聊天<br>
网易聊天</td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr style="CURSOR: hand" onclick="MM_ShowSublist3(5,2)">
<td><strong>游 戏</strong></td>
</tr>
<tr id="MM_sublist32" style="DISPLAY: none">
<td>17173<br>
新浪游戏<br>
太平洋游戏</td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr style="CURSOR: hand" onclick="MM_ShowSublist3(5,3)">
<td><strong>下 载</strong> </td>
</tr>
<tr id="MM_sublist33" style="DISPLAY: none">
<td>华军软件<br>
天空软件<br>
霏凡软件站</td>
</tr>
<tr>
<td height="8"></td>
</tr>
</table>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据