<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.1.js"></script> <style> *{ margin: 0; } .menu1{ height: 100px; width: 100%; background-color: yellowgreen; /*float: left;*/ line-height: 100px; } .con{ display: none; } </style> </head> <body> <div class="navigationbar"> <div class="menu1" onclick="onmenu(this)">菜单1</div> <div class="con wo"> <div>11111</div> <div>11111</div> <div>11111</div> </div> </div> <div class="navigationbar"> <div class="menu1" onclick="onmenu(this)">菜单2</div> <div class="con wo"> <div>22222</div> <div>22222</div> <div>22222</div> </div> </div> <div class="navigationbar"> <div class="menu1" onclick="onmenu(this)">菜单3</div> <div class="con wo"> <div>33333</div> <div>33333</div> <div>33333</div> </div> </div> </body> <script> function onmenu(self) { $(self).next().removeClass("con"); //删除con后就显示con //显示当前的con关闭其他的 $(self).parent().siblings().children(".wo").addClass("con"); } </script> </html>