1、对15周的后台管理左侧菜单进行了优化:
<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 class="header" onclick="ChangeMenu(this);">菜单1</div> //去调id标签,参数由i1改为this <div class="content"> <div>内容1</div> <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>内容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>内容3</div> </div> </div> </div> <script> function ChangeMenu(ths){ //将nid参数改为 ths //this 全局对象 current_header=ths; //将此处的代码由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>