菜单栏--Dom选择器
- 制作一个左侧菜单栏，包含菜单目录和内容
- 点击菜单栏才会展示内容，否则隐藏内容
二、事例
2.1 菜单栏基本样式
<body>
<div style="height: 48px;width: 200px">
<div class="item">
<div class="header">菜单1</div>
<div class="content">
<div> 内容1</div>
<div> 内容2</div>
<div> 内容3</div>
</div>
</div>
</div>
</body> # 将<div class="item"> 复制3份
初步效果：
2.2 为菜单添加样式
<style>
.item .header{
background-color: #2459a2;
font-size: 15px;
line-height: 35px;
color: white;
}
</style>
初步效果：
2.3 隐藏内容 （第一个默认展开）
# CSS样式
.hidden{
display: none;
} # 为内容增加隐藏样式
<div class="content hidden">
2.4 点击菜单栏时，出现内容，增加onclick事件
1. 修改每个菜单的div标签，增加id 和onclick
<div id="i1" class="header" onclick="ChangeMenu('i1');" >菜单1</div> 2.编写onclick事件的JS
function ChangeMenu(nid) {
// 获取点击菜单栏的标签
var current_header = document.getElementById(nid);
// 得到该标签的父父标签，即最外层的div标签,通过children获得列表
var menu_list = current_header.parentElement.parentElement.children;
// 简单的做法是为每个content的div加上hidden样式，再去掉点击菜单的hidden样式
// 循环增加样式
for(var i=0;i<menu_list.length;i++){
var current_content = menu_list[i].children[1];
current_content.classList.add('hidden');
}
// 去掉本
current_header.nextElementSibling.classList.remove('hidden');
}
效果：点击其他菜单时，原本的隐藏，点击的展开
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>menu_example</title>
<style>
.hidden{
display: none;
}
.item .header{
background-color: #2459a2;
font-size: 15px;
line-height: 35px;
color: white;
}
</style>
</head>
<body>
<div style="height: 48px;width: 200px">
<div class="item">
<div id="i1" class="header" onclick="ChangeMenu('i1');" >菜单1</div>
<div class="content ">
<div> 内容1</div>
<div> 内容2</div>
<div> 内容3</div>
</div>
</div>
<div class="item">
<div id="i2" class="header" onclick="ChangeMenu('i2');" >菜单2</div>
<div class="content hidden">
<div> 内容1</div>
<div> 内容2</div>
<div> 内容3</div>
</div>
</div>
<div class="item">
<div id="i3" class="header" onclick="ChangeMenu('i3');" >菜单3</div>
<div class="content hidden">
<div> 内容1</div>
<div> 内容2</div>
<div> 内容3</div>
</div>
</div>
<div class="item">
<div id="i4" class="header" onclick="ChangeMenu('i4');" >菜单4</div>
<div class="content hidden">
<div> 内容1</div>
<div> 内容2</div>
<div> 内容3</div>
</div>
</div>
</div>
<script>
function ChangeMenu(nid) {
// 获取点击菜单栏的标签
var current_header = document.getElementById(nid);
// 得到该标签的父父标签，即最外层的div标签,通过children获得列表
var menu_list = current_header.parentElement.parentElement.children;
// 简单的做法是为每个content的div加上hidden样式，再去掉点击菜单的hidden样式
// 循环增加样式
for(var i=0;i<menu_list.length;i++){
var current_content = menu_list[i].children[1];
current_content.classList.add('hidden');
}
// 去掉本
current_header.nextElementSibling.classList.remove('hidden');
}
</script>
</body>
</html>
菜单栏--Dom选择器的更多相关文章
- 都别说工资低了，我们来一起写简单的dom选择器吧！
前言 我师父(http://www.cnblogs.com/aaronjs/)说应当阅读框架(jquery),所以老夫就准备开始看了 然后公司的师兄原来写了个dom选择器,感觉不错啊!!!原来自己从来 ...
- 关于一个新的DOM选择器querySelector
在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一 ...
- 一周学会Mootools 1.4中文教程:(1)Dom选择器
利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...
- DOM选择器
DOM选择器分为:id.class.name.tagname.高级.关系选择器;(返回的都是标签) 一:元素节点选择器: 1. id: 返回的是单个对象 <body> <div cl ...
- 订制DOM选择器
本来是打算参考zepto.js,然后将里面想要的部分抽出来做函数,随调随用. 但后面发现这种写法重复代码太多,代码不整洁,于是就打算模仿下zepto的写法,挑出些比较实用的方法,造一下轮子. 起名叫“ ...
- 原生的强大DOM选择器querySelector
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- Dom选择器及操作文本内容
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
随机推荐
- 【个人】爬虫实践，利用xpath方式爬取数据之爬取虾米音乐排行榜
实验网站:虾米音乐排行榜 网站地址:http://www.xiami.com/chart 难度系数:★☆☆☆☆ 依赖库:request.lxml的etree (安装lxml:pip install ...
- Js_字体滚动换颜色
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- HTML表单与输入实例
解释HTML 表单用于搜集不同类型的用户输入.HTML 表单包含表单元素.表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等.<input> 元素<input ...
- LintCode——数字统计
数字统计:计算数字k在0到n中的出现的次数,k可能是0~9的一个值 样例:例如n=12,k=1,在 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],我们发现1出现 ...
- 转载别人的一篇关于git的文章
转载网址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
- 1094. The Largest Generation (25)-（dfs，树的遍历，统计每层的节点数）
题目很简单,就是统计一下每层的节点数,输出节点数最多的个数和对应的层数即可. #include <iostream> #include <cstdio> #include &l ...
- 团队作业week7
软件分析和用户需求调查 具体细则见: http://www.cnblogs.com/xinz/p/3308608.html
- “数学口袋精灵”App的第一个Sprint计划
一.现状 我们这个团队想制作一个关于运算的游戏类型手机软件,针对我们这个学期的Android软件开发的课程,制作出一个关于数学算术游戏软件. 二.任务认领 第一阶段先把静态网页制作出来,各自的任务: ...
- @Autowire和@Resource注解的区别
1.@Autowire是Spring开发的,而@Resource是jdk开发的 2.@Autowire是按照type来注解的,而@Resource是按照名称来的,如果名称找不到,那么就按照type,, ...
- 黄金分割点（第五周 c语言版）
在上一周,学习其他课程的同时,用C语言编写了黄金分割点小游戏.因为要做界面需要mfc,当时学的时候还做了个简单的计算器.目前c++的知识忘的差不多了,所以就先用C语言来实现算法.打算接下来的一周复习c ...