day15-JavaScript 左侧对话框

一、导语

　　接下来我们来做一个左侧菜单，因为我们这个经常用到，接下来我们来看看这个这个咋做的，废话不多说了，进入实战状态吧。

二、效果图

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .item .header{
11             height: 35px;
12             background-color: blue;
13             color: white;
14             line-height: 35px;
15         }
16     </style>
17 </head>
18 <body>
19     <div style="height: 48px"></div>
20 
21     <div style="width: 300px">
22         <div class="item">
23             <div  id="i1" class="header" onclick="changeMenu('i1');">菜单一</div>
24                 <div class="content ">
25                     <div>内容1</div>
26                     <div>内容1</div>
27                     <div>内容1</div>
28                 </div>
29 
30         </div>
31 
32         <div class="item">
33             <div id="i2" class="header" onclick="changeMenu('i2');">菜单二</div>
34                 <div class="content hide">
35                     <div>内容2</div>
36                     <div>内容2</div>
37                     <div>内容2</div>
38                 </div>
39 
40         </div>
41 
42         <div class="item">
43             <div id="i3" class="header" onclick="changeMenu('i3');" >菜单三 </div>
44                 <div class="content hide">
45                     <div>内容3</div>
46                     <div>内容3</div>
47                     <div>内容3</div>
48                 </div>
49 
50         </div>
51 
52         <div class="item">
53             <div id="i4" class="header" onclick="changeMenu('i4');">菜单四</div>
54             <div class="content hide">
55                 <div>内容4</div>
56                 <div>内容4</div>
57                 <div>内容4</div>
58             </div>
59 
60         </div>
61     </div>
62     <script>
63         function changeMenu(nid){
64 //            console.log(123)
65             var current_header= document.getElementById(nid);
66 //            console.log(current_header);
67             var c_h_parent= current_header.parentElement.parentElement;
68             var c_children_l= c_h_parent.children;
69 //            console.log(c_children_l)
70             for(var i=0; i<c_children_l.length;i++){
71                 c_children_l[i].children[1].classList.add("hide");
72                 current_header.nextElementSibling.classList.remove("hide")
73             }
74         }
75     </script>
76 </body>
77 </html>

 

posted @ 2018-05-22 09:59  东郭仔  阅读(123)  评论(0)    收藏  举报