JavaScript实现左侧菜单效果


Posted in Javascript onDecember 14, 2017

本文实例为大家分享了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>

效果就是这样:

JavaScript实现左侧菜单效果

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

JavaScript实现左侧菜单效果

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

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

Javascript 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
JavaScript实现全选取消效果
Dec 14 #Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 #Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 #Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 #Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 #Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 #Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
You might like
做个自己站内搜索引擎
2006/10/09 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php中session定期自动清理的方法
2015/11/12 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
python requests使用socks5的例子
2019/07/25 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
中专生自荐信
2013/10/12 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
材料采购员岗位职责
2013/12/17 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
市级三好学生评语
2014/12/29 职场文书
大学新生入学感想
2015/08/07 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python