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>

效果就是这样：