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

　　

二、事例

　　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. GAN初步——本质上就是在做优化，对于生成器传给辨别器的生成图片，生成器希望辨别器打上标签 1，体现在loss上！

    from:https://www.sohu.com/a/159976204_717210 GAN 从 2014 年诞生以来发展的是相当火热,比较著名的 GAN 的应用有 Pix2Pix.CycleGA ...

  2. 让Visual Studio载入Symbol（pdb）文件

    让Visual Studio载入Symbol(pdb)文件 让Visual Studio载入Symbol(pdb)文件 在VC编译工程的编译连接阶段,会产生Symbol文件,也就是常说的 pdb 文件 ...

  3. phpmyadmin连接MySQL服务器被拒绝

    显示: phpMyAdmin 尝试连接到MySQL服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和密码,并确认这些信息与 MySQL 服务器管理员所给出的信息一致. 原因: 可能是修改了 ...

  4. 【转】浅谈php://filter的妙用

    php://filter是PHP中独有的协议,利用这个协议可以创造很多“妙用”,本文说几个有意思的点,剩下的大家自己下去体会. XXE中的使用 php://filter之前最常出镜的地方是XXE.由于 ...

  5. Scrapyd+Gerapy部署Scrapy爬虫进行可视化管理

    Scrapy是一个流行的爬虫框架,利用Scrapyd,可以将其部署在远程服务端运行,并通过命令对爬虫进行管理,而Gerapy为我们提供了精美的UI,可以在web页面上直接点击操作,管理部署在scrap ...

  6. Docker部署Registry私有镜像库

    拉取镜像 docker pull registry:2.6.2   生成账号密码文件,这里采用htpasswd方式认证 docker run --rm --entrypoint htpasswd re ...

  7. unity2D限制位置的背景移动补偿效果

    有时候我们想要背景可以跟随相机移动补偿,但是又不想该背景物体离原来的位置太远,比如我们想要一棵树在一个房子的后面,然后使用相机补偿使其跟随移动,达到3D错觉效果,但是我们又不想该物体偏离房屋太远.假设 ...

  8. python 游戏(数字推理游戏Bagels)

    1.游戏思路和流程图 实现功能:玩家猜测三位不一样的数字,猜错了有提示,提示分别为(位置错误数字正确),(位置和数字正确),(数字和位置都不正确) 游戏流程图 2. 使用模块和游戏提示 import ...

  9. 微软职位内部推荐-SW Engineer II for WinCE

    微软近期Open的职位: Do you have a passion for embedded devices and services? &nbsp Does the following m ...

  10. Android的发展历程及搭建

    Android的发展历程: 对于Android我比较不熟悉,因为我的第一只手机就是iphone,我没用过Android系统,但在中国使用带有Android系统的手机的人数是最多的,所以我想学习Andr ...