菜单栏--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 CSpinButton
知识点: CSliderCtrl(滑块)控件 CSliderCtrl常用属性 CSliderCtrl类常用成员函数 CSliderCtrl运用示例 一.CSliderCtr常用属性 Orientati ...
- idea git pull项目到本地时容易出现的问题
有时候pull到本地,出了各种错误,其实是因为搞来搞去的,容易出问题,所以最好的方法是拿原有打包好的整个稳定能跑的项目环境, 先git add,然后vcs重置head为hard,然后再pull,一般就 ...
- 后端自动构建前端css和js
引子: 别的复杂前端开发技术不会,用得多的还是手写代码,手动处理. 3年前手写合并压缩js和css文件的asp脚本代码目前还能正常运行,也就没有多大使用别的技术的动力. 直到近期被一个问题纠结着,今天 ...
- 【原创】梵高油画用深度卷积神经网络迭代10万次是什么效果？ A neural style of convolutional neural networks
作为一个脱离了低级趣味的码农,春节假期闲来无事,决定做一些有意思的事情打发时间,碰巧看到这篇论文: A neural style of convolutional neural networks,译作 ...
- 通过Mysql连接ASP.Net Core2.0(Code First模式)
ASP.NET Core2.0连接Mysql,首先新建项目 选择Web应用程序 选择需要身份验证: 通过Nuget安装Mysql驱动,这里推荐>Pomelo.EntityFrameworkCor ...
- idou老师教你学Istio: 如何用Istio实现K8S Egress流量管理
本文主要介绍在使用Istio时如何访问集群外服务,即对出口流量的管理. 默认安装的Istio是不能直接对集群外部服务进行访问的,如果需要将外部服务暴露给 Istio 集群中的客户端,目前有两种方案: ...
- 比特币初始版本VC6.0编译
1 源码下载 github上初始版本是bitcoin-0.1.5,可以从https://github.com/bitcoin/bitcoin下载,但是从网上可以找到更老版本bitcoin-0.1.0, ...
- 制作R中分词的字典的办法
在开始下面步骤之前先让自己的文件可以显示扩展名. 如何显示请谷歌. 第一步:打开一个文本文件 第二步:把你要的词复制到这个文本文件吧. 第三步:将这个文本文件的格式改为dic.即原来文件格式是txt后 ...
- 第二阶段Sprint9
昨天:重新规划主界面,把视频录制暂放到主页面里 今天:查看有关“共享平台”的资料,看如何实现上传下载功能,并尝试编码, 遇到的问题:看不懂什么意思,照例子做不行,还得需要联网等
- Yale数据库上的人脸识别
一.问题分析 1. 问题描述 在Yale数据集上完成以下工作:在给定的人脸库中,通过算法完成人脸识别,算法需要做到能判断出测试的人脸是否属于给定的数据集.如果属于,需要判断出测试的人脸属于数据集中的哪 ...