javascript 左側菜單
阿新 • • 發佈：2018-05-13
style click item ren func chan log isp none
<!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>
javascript 左側菜單