小程序解决方法_JavaScript完成左侧菜单效果

JavaScript实现左侧菜单效果       这篇文章主要为大家详细介绍了JavaScript实现左侧菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 /div 
 div 
 div 
 div id='i1' 菜单1 /div 
 div 
 div 内容1 /div 
 div 内容1 /div 
 div 内容1 /div 
 /div 
 /div 
 div 
 div id='i2' 菜单2 /div 
 div 
 div 内容2 /div 
 div 内容2 /div 
 div 内容2 /div 
 /div 
 /div 
 div 
 div id='i3' 菜单3 /div 
 div 
 div 内容3 /div 
 div 内容3 /div 
 div 内容3 /div 
 /div 
 /div 
 div 
 div id='i4' 菜单4 /div 
 div 
 div 内容4 /div 
 div 内容4 /div 
 div 内容4 /div 
 /div 
 /div 

效果就是这样：

点击任意一个菜单后就会这样：

这样就实现了一个简单的菜单。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。