js:树形菜单

 

 <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
  </head>
  
  <body>
    <div>
       <a href="javascript:void()"  onmouseover="on_over(1)">男装</a>&gt;&gt;&gt;
       <a href="javascript:void()"  onmouseover="on_over(2)">女装</a>&gt;&gt;&gt;
       <a href="javascript:void()"  onmouseover="on_over(3)">童装</a><br>
       <div style="display: inline-block; border: 1px solid silver;position: absolute; left: 6px;top: 30px; " id="div1">
          <a href="">男衣</a><br>
          <a href="">男裤</a>
       </div>
        <div style="display: inline-block;border: 1px solid silver;color: red;position: absolute; left: 70px;top: 30px;" id="div2">
          <a href="">女衣</a><br>
          <a href="">女裤</a>
       </div>
       <div style="display: inline-block;border: 1px solid silver;position: absolute; left: 135px;top: 30px;" id="div3">
          <a href="">童衣</a><br>
          <a href="">童裤</a>
       </div>
       
    </div>
  </body>
  <script type="text/javascript">
    (function(){
       $("").ready(function(){
             //全部隐藏
         document.getElementById("div1").style.display="none"
         document.getElementById("div2").style.display="none";
         document.getElementById("div3").style.display="none";
       });
    })();
  
     function on_over(n){
            document.getElementById("div1").style.display="none"
            document.getElementById("div2").style.display="none";
            document.getElementById("div3").style.display="none";
            document.getElementById("div"+n).style.display="inline-block";
     }
  </script>

效果:   (可以延伸为多级树状结构的显示)

posted @ 2016-09-15 11:59  乱世_独自美  阅读(161)  评论(0)    收藏  举报