javascript 显示树形菜单

<html>
<head>
 <title>树形结构</title>
 <meta http-equiv="content-type" content="text/html;charset=gb2312" />
 
 <script language="javascript">
  function changeDiv(id)
  {
   var div = document.getElementById(id);
   if(div.style.display=='none')
   {
    div.style.display='block';
   }else {
    div.style.display= 'none';
   }
  }
  
 </script>
 
</head>
<body>
 <p>
  树形菜单
 </p>
 <p>
  <a href="javascript:onclick=changeDiv('div1')">个人首页</a>
 </p>
  
 <!--用div来控制树的下拉结构-->
 <div id="div1" style="display:none">
  &nbsp;&nbsp;<a href="#" >学生选课</a><br />
  &nbsp;&nbsp;<a href="#" >教师评估</a><br />
  &nbsp;&nbsp;<a href="#" >成绩查询</a><br />
  &nbsp;&nbsp;<a href="#" >考试安排</a><br />
  &nbsp;&nbsp;<a href="#" >名师评审</a><br />
  &nbsp;&nbsp;<a href="#" >考级报名</a><br />
  &nbsp;&nbsp;<a href="#" >学籍卡片</a><br />
 </div>
 <p>
  <a href="javascript:onclick=changeDiv('div2')" >公共首页</a>
 </p>

 
 <div id="div2"  style="display:none" onclick="changeDiv('div2')">
  &nbsp;&nbsp;<a href="#" >学校动态</a><br />
  &nbsp;&nbsp;<a href="#" >课表查询</a><br />
  &nbsp;&nbsp;<a href="#" >学校新闻</a><br />
 </div>
</body>
</html>

你可能感兴趣的:(JavaScript,html)