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>
jQuery左侧菜单实例
猜你喜欢
转载自www.cnblogs.com/506941763lcj/p/9938733.html
今日推荐
周排行