jQuery左侧菜单实例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .outer{
             width:100%;
             height:1000px;
         }
         .menu{
             height:500px;
             width:30%;
             float: left;
             background-color:burlywood;
         }
         .content{
             height: 500px;
             width: 70%;
             float: left;
             background-color:aqua;
         }
         .hide{
             display:none;
         }
     </style>
 </head>
 <body>
 <div class="outer">
     <div class="menu">
         <div class="item">
             <div class="title" onclick="show(this)">菜单一</div>
             <div class="con">
                 <div>111</div>
                 <div>111</div>
                 <div>111</div>
             </div>
         </div>
         <div class="item" >
             <div class="title" onclick="show(this)">菜单二</div>
             <div class="con hide">
                 <div>222</div>
                 <div>222</div>
                 <div>222</div>
             </div>
         </div>

         <div class="item">
             <div class="title" onclick="show(this)">菜单三</div>
             <div class="con hide">
                 <div>333</div>
                 <div>333</div>
                 <div>333</div>
             </div>
         </div>
     </div>
     <div class="content"></div>
 </div>
 <script src="jquery-3.3.1.min.js"></script>
 <script>
     function show(self) {
         $(self).next().removeClass('hide');
         $(self).parent().siblings().children('.con').addClass('hide');
     }
 </script>
 </body>
 </html>