• 制作一个左侧菜单栏，包含菜单目录和内容
  • 点击菜单栏才会展示内容，否则隐藏内容

　　

二、事例

　　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选择器的更多相关文章

  1. 都别说工资低了，我们来一起写简单的dom选择器吧！

    前言 我师父(http://www.cnblogs.com/aaronjs/)说应当阅读框架(jquery),所以老夫就准备开始看了 然后公司的师兄原来写了个dom选择器,感觉不错啊!!!原来自己从来 ...

  2. 关于一个新的DOM选择器querySelector

    在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一 ...

  3. 一周学会Mootools 1.4中文教程:(1)Dom选择器

    利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...

  4. DOM选择器

    DOM选择器分为:id.class.name.tagname.高级.关系选择器;(返回的都是标签) 一:元素节点选择器: 1. id: 返回的是单个对象 <body> <div cl ...

  5. 订制DOM选择器

    本来是打算参考zepto.js,然后将里面想要的部分抽出来做函数,随调随用. 但后面发现这种写法重复代码太多,代码不整洁,于是就打算模仿下zepto的写法,挑出些比较实用的方法,造一下轮子. 起名叫“ ...

  6. 原生的强大DOM选择器querySelector

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  7. Dom选择器及操作文本内容

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  8. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  9. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

随机推荐

  1. python 网络爬虫requests模块

    一.requests模块 requests模块是python中原生的基于网络请求的模块,其主要作用是用来模拟浏览器发起请求.功能强大,用法简洁高效. 1.1 模块介绍及请求过程 requests模块模 ...

  2. 工具神器推荐 Vox 和 search everything

    工具神器推荐 Vox 和 search everything vox官网: http://www.wox.one/

  3. pycharm如何在虚拟环境中引入别人的项目

    如果你想引入别人的项目,但是呢引入的项目可能与自己原先装的模块的版本产生冲突,而且如果引入一个项目就在本地进行运行使用,每个项目用的依赖包都不大相同,就会导致解释器安装包过多,就会导致加载过慢,甚至会 ...

  4. 【ORACLE】Win2008R2修改oracle数据库实例名

    需求说明:要求将windows平台的数据库实例名由orcl改为haha 参考: https://www.cnblogs.com/junnor/archive/2013/03/05/2945245.ht ...

  5. 12、利用docker快速搭建Wordpress网站

    一.准备工作 结构图: 用户访问页面,Nginx将请求进行转发,如果请求的是php页面,则通过FastCGI转发给后端php进行处理:如果非php页面,则直接返回静态页面. 关键点: mysql.ph ...

  6. Asp.Net_后台代码访问前台html标签

    //单击按钮后批量改变li元素的内联文本值及样式 ; i <= ; i++) { HtmlGenericControl li = this.FindControl("li" ...

  7. Yaml学习文档

    pdf文档地址 http://yaml.org/spec/ JS-Yaml demo地址 http://nodeca.github.io/js-yaml/

  8. 粒子群算法（PSO）算法解析（简略版）

    粒子群算法(PSO) 1.粒子群算法(PSO)是一种基于群体的随机优化技术: 初始化为一组随机解,通过迭代搜寻最优解. PSO算法流程如图所示(此图是从PPT做好,复制过来的,有些模糊) 2.PSO模 ...

  9. 图-图的表示、搜索算法及其Java实现

    1.图的表示方法 图:G=(V,E),V代表节点,E代表边. 图有两种表示方法:邻接链表和邻接矩阵 邻接链表因为在表示稀疏图(边的条数|E|远远小于|V|²的图)时非常紧凑而成为通常的选择. 如果需要 ...

  10. M1事后分析报告--We have power to change the origin state

    M1事后分析报告 设计与实现 我们发的软件解决的问题?是否满足后面小组的要求?是否能够完全拟合前期目标? 答: 前期我们的软件完成量并不是特别让人满意,我们组在完成这些任务量之后,发现有很多地方是在做 ...