js 显示/隐藏 菜单 li怎么实现啊？求助
我想要点击“工具”菜单中的“小节工具”，就把“小节工具”这个菜单显示出来。点击“工具”菜单中的“排版工具”，就把“排版工具”显示出来，之前的“小节工具”隐藏。应该怎么写J...
我想要点击“工具”菜单中的“小节工具”，就把“小节工具”这个菜单显示出来。
点击“工具”菜单中的“排版工具”，就把“排版工具”显示出来，之前的“小节工具”隐藏。
应该怎么写JS，怎么实现这个交果呢？感谢！
代码如下：
<style type="text/css">
body { ont-family:"宋体"; ont-size:10px; }
.menu { height:30px; background:#e6e6e6; margin-left:10px; }
.menu a { text-decoration:none; }
ul { margin:0; padding:0; }
.menu li { list-style:none; float:left; width:90px; overflow:visible; cursor:pointer; }
ul.level0 { height:30px; overflow:visible; }
ul.level1, ul.level2, ul.level3 { width:90px; display:none; }
ul.level2, ul.level3 { margin:-28px 0 0 90px; }
ul.level0 > li { height:30px; line-height:30px; text-align:center; background:#999; }
ul.level1 > li, ul.level2 > li, ul.level3 > li { height:25px; line-height:28px;background:#bbb; }
ul.level0 > li.imyeah:hover > ul, ul.level1 > li.imyeah:hover > ul, ul.level2 > li.imyeah:hover > ul, ul.level3 > li.imyeah:hover > ul { display:block; }
</style>
</head>
<body>
<div class="menu">
<ul class="level0">
<!--工具菜单-->
<li class="imyeah">工具
<ul class="level1">
<li>小节工具</a></li>
<li>排版工具</a></li>
</ul>
</li>
<!--小节工具菜单-->
<li class="imyeah" style="display:none" id="measure">小节工具</li>
<!--排版工具菜单-->
<li class="imyeah" style="display:none" id="pageLayout">排版工具</li>
</ul>
</div>
</body>
</html> 展开
点击“工具”菜单中的“排版工具”，就把“排版工具”显示出来，之前的“小节工具”隐藏。
应该怎么写JS，怎么实现这个交果呢？感谢！
代码如下：
<style type="text/css">
body { ont-family:"宋体"; ont-size:10px; }
.menu { height:30px; background:#e6e6e6; margin-left:10px; }
.menu a { text-decoration:none; }
ul { margin:0; padding:0; }
.menu li { list-style:none; float:left; width:90px; overflow:visible; cursor:pointer; }
ul.level0 { height:30px; overflow:visible; }
ul.level1, ul.level2, ul.level3 { width:90px; display:none; }
ul.level2, ul.level3 { margin:-28px 0 0 90px; }
ul.level0 > li { height:30px; line-height:30px; text-align:center; background:#999; }
ul.level1 > li, ul.level2 > li, ul.level3 > li { height:25px; line-height:28px;background:#bbb; }
ul.level0 > li.imyeah:hover > ul, ul.level1 > li.imyeah:hover > ul, ul.level2 > li.imyeah:hover > ul, ul.level3 > li.imyeah:hover > ul { display:block; }
</style>
</head>
<body>
<div class="menu">
<ul class="level0">
<!--工具菜单-->
<li class="imyeah">工具
<ul class="level1">
<li>小节工具</a></li>
<li>排版工具</a></li>
</ul>
</li>
<!--小节工具菜单-->
<li class="imyeah" style="display:none" id="measure">小节工具</li>
<!--排版工具菜单-->
<li class="imyeah" style="display:none" id="pageLayout">排版工具</li>
</ul>
</div>
</body>
</html> 展开
1个回答
展开全部
<body>
<div class="menu">
<ul class="level0" id="leve">
<!--工具菜单-->
<li class="imyeah">工具
<ul class="level1" id="leve1">
<li>小节工具</a></li>
<li>排版工具</a></li>
</ul>
</li>
<!--小节工具菜单-->
<li class="imyeah" style="display: none;" id="measure">小节工具</li>
<!--排版工具菜单-->
<li class="imyeah" style="display: none;" id="pageLayout">排版工具</li>
</ul>
</div>
<script type="text/javascript">
var oLe = document.getElementById('leve1').getElementsByTagName('li');
var oImy = document.getElementById('leve').getElementsByTagName('li');
var oMe = document.getElementById('measure');
var oPa = document.getElementById('pageLayout');
oLe[0].onclick = function(){
oMe.style.display = 'block';
oPa.style.display = 'none';
}
oLe[1].onclick = function(){
oMe.style.display = 'none';
oPa.style.display = 'block';
}
</script>
</body>
记得采纳，谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
