jQuery左侧菜单实例 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .outer{
 8             width:100%;
 9             height:1000px;
10         }
11         .menu{
12             height:500px;
13             width:30%;
14             float: left;
15             background-color:burlywood;
16         }
17         .content{
18             height: 500px;
19             width: 70%;
20             float: left;
21             background-color:aqua;
22         }
23         .hide{
24             display:none;
25         }
26     </style>
27 </head>
28 <body>
29 <div class="outer">
30     <div class="menu">
31         <div class="item">
32             <div class="title" onclick="show(this)">菜单一</div>
33             <div class="con">
34                 <div>111</div>
35                 <div>111</div>
36                 <div>111</div>
37             </div>
38         </div>
39         <div class="item" >
40             <div class="title" onclick="show(this)">菜单二</div>
41             <div class="con hide">
42                 <div>222</div>
43                 <div>222</div>
44                 <div>222</div>
45             </div>
46         </div>
47 
48         <div class="item">
49             <div class="title" onclick="show(this)">菜单三</div>
50             <div class="con hide">
51                 <div>333</div>
52                 <div>333</div>
53                 <div>333</div>
54             </div>
55         </div>
56     </div>
57     <div class="content"></div>
58 </div>
59 <script src="jquery-3.3.1.min.js"></script>
60 <script>
61     function show(self) {
62         $(self).next().removeClass('hide');
63         $(self).parent().siblings().children('.con').addClass('hide');
64     }
65 </script>
66 </body>
67 </html>

 

posted on 2018-11-10 11:29  lfylcj  阅读(396)  评论(0)    收藏  举报

导航