标签：height set change sibling list width idt func style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; /*放置垂直*/ } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div id=‘i1‘ class="header" onclick="ChangeMenu(‘i1‘)">菜单一</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‘)">菜单二</div> <div class="content"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id = ‘i3‘ class="header" onclick="ChangeMenu(‘i3‘)">菜单三</div> <div class="content"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> </div> <!--修改菜单功能--> <script> function ChangeMenu(mid) { var current_header = document.getElementById(mid); //当前头部 console.log(current_header); var current_base_header = current_header.parentElement.parentElement console.log(current_base_header); var current_list = current_base_header.children; for(var i=0;i<current_list.length;i++){ var current_item = current_list[i]; current_item.children[1].classList.add("hide"); } current_header.nextElementSibling.classList.remove(‘hide‘) } </script> </body> </html>
标签：height set change sibling list width idt func style
原文地址：https://www.cnblogs.com/Liang-jc/p/9032087.html
