JavaScript實現左側菜單效果

2019-11-19 14:44:01

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了js實現左側菜單效果展示的具體代碼，供大家參考，具體內容如下

當前所學做出來的代碼量有點大，以后的學習會使它更簡單

<!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');">菜單1</div> <div class="content hide">  <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 class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜單4</div> <div class="content hide">  <div>內容4</div>  <div>內容4</div>  <div>內容4</div> </div> </div></div><script> function ChangeMenu(nid) { var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for (var i = 0; i < item_list.length; i++) {  var current_item = item_list[i];  current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); }</script></body></html>

效果就是這樣：