菜单-二级菜单的制作

来源：互联网发布：ubuntu安装uefi 编辑：程序博客网时间：2024/04/25 16:31

<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>