<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ font-size: 30px;background-color:#2459a2;width: 90px;line-height: 48px;color: white; } .hide{ display: none } </style> </head> <body> <div style="height: 48px"></div> <div style=" 300px"> <div class="item"> <div class="header" id="i1" onclick="ChangeMenu('i1')" >菜单一</div> <div class="content" > <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item"> <div class="header" id="i2" onclick="ChangeMenu('i2')">菜单二</div> <div class="content hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item"> <div class="header" id="i3" onclick="ChangeMenu('i3')">菜单三</div> <div class="content hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item"> <div class="header" id="i4" onclick="ChangeMenu('i4')">菜单四</div> <div class="content hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> </div> <script> function ChangeMenu(nid) { var current_header=document.getElementById(nid); //找到所有的item标签 var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; console.log(current_item); current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>