<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ height: 1000px; 100%; } .menu{ float: left; background-color: beige; 30%; height: 500px; } .content{ float: left; background-color: rebeccapurple; 70%; height: 500px; } .title{ background-color: aquamarine; line-height: 40px; } .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"><!--隐藏起来，一个类名2个名字功能不同--> <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(hello) {//jquery对象取的方法,不加引号-----$(hello) $(hello).next().removeClass("hide");//移除hide名字，显示 $(hello).parent().siblings().children(".con").addClass("hide");//加上hide名字重新隐藏item //拿到菜单一二三标签，找到父标签item,找到sibilings标签即另外2个item标签， // 对另2个item标签children标签找到icon标签，加上类名hide } </script> </body> </html>