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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 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
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
js资料prototype 属性
2007/03/13 Javascript
iis6+javascript Add an Extension File
2007/06/13 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
免税水晶:Duty Free Crystal
2019/05/13 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
文明学生事迹材料
2014/01/29 职场文书
公司新年寄语
2014/04/04 职场文书
小区文明倡议书
2014/05/16 职场文书
求职自我推荐信
2014/06/25 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
加薪申请报告范本
2015/05/15 职场文书
转学证明范本
2015/06/19 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL