<style type="text/css">
dl
{
width: 100px;
height: 170px;
text-align: center;
}
dl dd
{
margin: 0px;
border:1px solid black;
cursor:pointer;
}
dt
{
display:none;
}
</style>
<script type="text/javascript">
function a(s) {
var box = s.id;//注意：这是获取s所代表的dt
var dts = document.getElementsByTagName("dt");//这步是把同级的dt全部查出来
for (var j = 0; j < dts.length; j++) {
var dd = box + j;
if (dts[j].id == dd) {
dts[j].style.display = "block";
}
else {
dts[j].style.display = "none";
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<dl>
<dd id="d" οnclick="a(d)">
一级菜单A
</dd>
<dt id="d0">一级菜单A1 </dt>
<dt id="d1">一级菜单A2 </dt>
<dt id="d2">一级菜单A3 </dt>
<dt id="d3">一级菜单A4 </dt>
<dd id="c" οnclick="a(c)">
一级菜单B
</dd>
<dt id="c4">一级菜单B1 </dt>
<dt id="c5">一级菜单B2 </dt>
<dt id="c6">一级菜单B3 </dt>
<dt id="c7">一级菜单B4 </dt>
</dl>
</div>
</form>
</body>
</html>
注意：id必须从0开始取，循环时也从0开始循环。这样不易出错。
扫一扫
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
