<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #f25022; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div class="header" onclick="ChangeMenu(this)">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div class="header" onclick="ChangeMenu(this)">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div class="header" onclick="ChangeMenu(this)">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div class="header" onclick="ChangeMenu(this)">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(ths){ current_head = ths; var all_text =current_head.parentElement.parentElement; children_text = all_text.children; for(var i=0; i<children_text.length; i++){ current_text = children_text[i]; current_text.children[1].classList.add('hide') } current_head.nextElementSibling.classList.remove('hide') } </script> </body> </html>
