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左侧菜单实例
原文地址：https://www.cnblogs.com/506941763lcj/p/9938733.html