全国服务热线:4008-888-888

行业新闻

小程序解决方法_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 

效果就是这样:

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

这样就实现了一个简单的菜单。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服