1、后台管理左侧菜单，即当选择菜单2时，菜单2的内容显示；其他菜单的内容隐藏
使用了DOM间接选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none; } .item .header{ height:35px; background-color:blue; color:white; line-height:40px; } </style> </head> <body> <div style="height:48px"></div> <div style="50px"> <div class="item"> <div id="i1" class="header" onclick="ChangeMenu('i1');">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id="i2" class="header" onclick="ChangeMenu('i2');">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id="i3" class="header" onclick="ChangeMenu('i3');">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header=document.getElementById(nid); var item_list=current_header.parentElement.parentElement.children; // 找到所有的item标签 for(var i=0;i<item_list.length;i++){ var current_item=item_list[i]; // 获取所有的item标签 current_item.children[1].classList.add('hide'); //找到所有item标签下的第二个孩子标签，即content标签，将hide添加 } current_header.nextElementSibling.classList.remove('hide'); //找到当前header的下一个兄弟标签，将其移除，使其样式显示 } </script> </body> </html>
执行结果如下：
当点击菜单2时，菜单2的内容显示；其他菜单的内容隐藏。
