本文实例为大家分享了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>
效果就是这样:
点击任意一个菜单后就会这样:
这样就实现了一个简单的菜单。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- vue.js 左侧二级菜单显示与隐藏切换的实例代码
- javascript仿京东导航左侧分类导航下拉菜单效果
- JS实现新浪博客左侧的Blog管理菜单效果代码
- JS实现的左侧竖向滑动菜单效果代码
- JS+CSS实现经典的左侧竖向滑动菜单效果
- js实现的后台左侧管理菜单代码
- 原生JS实现仿淘宝网左侧商品分类菜单效果代码
- js实现的四级左侧网站分类菜单实例
- js左侧三级菜单导航实例代码
- js左侧多级菜单动态的解决方案