本文介绍了一种使用HTML和JavaScript实现的伸缩形菜单设计。该菜单包括多个技术分类，如网站源码、编程源码、前端脚本等，并且每个分类下还有详细的技术子项。点击主菜单项时，相应的子菜单会伸缩显示。
<%@ page language="java" contentType="text/html"
pageEncoding="utf-8"%>
<html>
<head>
<title>伸缩形的菜单</title>
</head>
<body>
<BODY>
<table width="100%">
<tr id="main"><td bgcolor="#F6FFEC"><strong><a style="cursor:hand;"title="etststst">网站源码</a></strong></td>
</tr>
<tr id="sub" style="display:none;"><td><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><ul>
<li><a href="#">ASP</a></li>
</ul></td>
</tr>
<tr>
<td><ul>
<li><a href="#">PHP</a></li>
</ul></td>
</tr>
<tr>
<td><ul>
<li><a href="#">ASP.NET</a></li>
</ul></td>
</tr>
</table></td>
</tr>
<tr id="main"><td><a href="#">编程源码</a></td>
</tr>
<tr id="sub" style="display:none;"><td><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>vb</td>
</tr>
<tr>
<td>VC</td>
</tr>
<tr>
<td>DELPHI</td>
</tr>
<tr>
<td>PB</td>
</tr>
</table>
</td>
</tr>
<tr id="main"><td><a href="#">前端脚本</a></td>
</tr>
<tr id="sub" style="display:none;"><td>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>jQuery</td>
</tr>
<tr>
<td>prototype</td>
</tr>
<tr>
<td>ext</td>
</tr>
</table>
<tr id="main"><td><a href="#">网页素材</a></td>
</tr>
<tr id="sub" style="display:none;"><td>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Tab</td>
</tr>
<tr>
<td>Menu</td>
</tr>
</table>
</td>
</tr>
</table>
<script for="main" event="onclick">
for(var i=0; i<sub.length; i++){
if (main[i] == this) sub[i].style.display = sub[i].style.display == '' ? 'none' : '';
else sub[i].style.display = 'none';
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
