菜单-二级菜单的制作

最新推荐文章于 2023-04-07 15:33:03 发布

一知

最新推荐文章于 2023-04-07 15:33:03 发布

阅读量1.6k

点赞数

分类专栏： Javascript 文章标签：菜单二级菜单 js

本文链接：https://blog.csdn.net/laozhangu/article/details/16834379

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>二级菜单的制作</title>
<style type="text/css">
*{ padding:0; margin:0;}
#menu p{ width:200px; height:30px; background:black; line-height:30px; color:White;}
#menu div{ width:200px; height:100px; background:gray;}
.myshow{ display:block;}
.myhide{ display:none;}
</style>
<script type="text/javascript">
    window.onload = function () {
        var menup = document.getElementById("menu").getElementsByTagName("p");
        var menudiv = document.getElementById("menu").getElementsByTagName("div");
        var j = 0;
        var ind;
        for (var i = 0; i < menup.length; i++) {
            menup[i].index = menudiv[i].index = i;
            menup[i].onclick = function () {
                ind = this.index;
                menudiv[j].className = "myhide";
                menudiv[ind].className = "myshow";
                j = ind;
            }
        }
    }
</script>
</head>
<body>
<div id="menu">
   <p>第一章</p>
   <div class="myshow">1.1</div>
   <p>第二章</p>
   <div class="myhide">2.1</div>
   <p>第三章</p>
   <div class="myhide">3.1</div>
</div>
</body>
</html>

一知

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
菜单-二级菜单的制作

二级菜单的制作*{ padding:0; margin:0;}#menu p{ width:200px; height:30px; background:black; line-height:30px; color:White;}#menu div{ width:200px; height:100px; background:gray;}.myshow{ display:block;}
复制链接

扫一扫