JavaScript实现左侧菜单效果
更新时间:2017年12月14日 10:22:31 作者:XYQS
这篇文章主要为大家详细介绍了JavaScript实现左侧菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家分享了js实现左侧菜单效果展示的具体代码,供大家参考,具体内容如下
当前所学做出来的代码量有点大,以后的学习会使它更简单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!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 > |
效果就是这样:
点击任意一个菜单后就会这样:
这样就实现了一个简单的菜单。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
微信小程序如何修改radio和checkbox的默认样式和图标
这篇文章主要介绍了微信小程序修改radio和checkbox的默认样式和图标,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最新评论