菜单栏--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 ...
随机推荐
- MFC Timer定时器
知识点: 定时器Timer 创建定时器 销毁定时器 代码测试 一. 创建定时器 UINT SetTimer( HWND hWnd, // 指定关联定时器的窗口句柄,在MFC版将省略此参数 UINT n ...
- Ansible入门笔记（1）之工作架构和使用原理
目录 Ansible入门笔记(1) 1.Ansible特性 2.ansible架构解析 3.ansible主要组成部分 1)命令执行来源: 2)利用ansible实现管理的方式 3)Ansile-pl ...
- Java Web应用中支持跨域请求
转载:https://blog.csdn.net/lmy86263/article/details/51724221 由于工程合作开发的需要,后台的应用要能支持跨域访问,但是在这个跨域访问“时好时坏” ...
- jQuery .attr() vs. .prop()
Property vs. Attribute 在开始正式比较prop()和attr()两个jQuery方法之前,我们有必要先弄清一下Property和Attribute两个单词的意思.在中文里面,它们 ...
- 《Effective Java》学习笔记 —— 序列化
Java的序列化API提供了一个框架,用来将对象编码成一个字节流(序列化,serializing),并从字节流中重新创建对象(反序列化, deserializing). 第74条 谨慎地实现Seria ...
- 《无所不能的JavaScript编程系列：setTimeout 简笔》
前言:问题引出 JavaScript中会经常用到setTimeout来推迟一个函数的执行,如: setTimeout(function(){alert("Hello World") ...
- Js_实现3D球体旋转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [git hooks] pre-commit 配置
在开发过程中,通常使用 eslint 来规范团队的代码风格.但是 eslint 只能在开发服务器启动的时候才去检验代码.如果一个人在不启动开发服务器的情况下,修改了代码直接提交到git,那么别人pul ...
- LintCode——Chalkboard XOR Game(黑板游戏)
黑板游戏: We are given non-negative integers nums[i] which are written on a chalkboard. Alice and Bob ta ...
- Unity3D与C#网站收藏
siki学院(目前学习ing) http://www.sikiedu.com/ 雨松MOMO研究院 http://www.xuanyusong.com/ 知乎:Unity 开发教程相关回答(初步了解下 ...