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

　　

二、事例

　　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. vim打开多窗口、多文件之间的切换

    打开多个文件: 一.vim还没有启动的时候: 1.在终端里输入  vim file1 file2 ... filen便可以打开所有想要打开的文件 2.vim已经启动 输入 :e file 可以再打开一 ...

  2. 【Unity Shader】（三） ------ 光照模型原理及漫反射和高光反射的实现

    [Unity Shader](三) ---------------- 光照模型原理及漫反射和高光反射的实现 [Unity Shader](四) ------ 纹理之法线纹理.单张纹理及遮罩纹理的实现 ...

  3. unity音量设置（同时设置到多个物体上）——引伸语言设置

    在游戏中游戏设置是一个很重要的功能,但是比如语言设置和音量设置分散在很多个物体的组件上,如果每个对应的物体都放到一个链表里,会导致程序雍总难堪,使用事件调用是最好的方式 音量存储类 SoundMana ...

  4. PAT甲题题解-1121. Damn Single (25)-水题

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789787.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  5. group by 和count的联合使用问题 [转]

    group by 和count的联合使用问题 今天写查询语句遇到一个问题,就是用group by进行分组以后,用count统计分组以后的个数, 开始写的语句大体是: select count(m.fb ...

  6. Daily Scrum NO.7

    工作概况 今日由于时间比较充裕,没有编译作业的干扰,团员们的进度喜人.线程池.动态爬取.异常清理这三个主要开发工作已经步入尾声.其中线程池开发工作的代码已经签入,现主要在测试和优化.动态爬取今日也签入 ...

  7. Linux内核分析——第一章 Linux内核简介

    第一章   Linux内核简介 一.Unix的历史 1.Unix系统成为一个强大.健壮和稳定的操作系统的根本原因: (1)简洁 (2)在Unix中,很多东西都被当做文件对待.这种抽象使对数据和对设备的 ...

  8. JS 一些问题与解决方法

    一.post/get传输json数据中包含特殊字符 在使用HTTP请求传输数据时,因为他本身也需要一些字符做标记,比如= &,所以传输的数据中如果有特殊字符,就会被错误的理解成标记字符做了一些 ...

  9. Linux命令（三） 移动文件 mv

    用户可以使用 mv 命令来移动文件或目录至另一个文件或目录, 还可以将目录或文件重命名. 如果将一个文件移动到一个已经存在的目标文件中,目标文件的内容将会被覆盖.mv 命令接收两个参数时,第一个参数表 ...

  10. Linux用户管理简介

    Linux用户管理是Linux的优良特性之一,本文说明了Linux中用户的登录过程和登录用户的类型. 一.Linux用户登录过程 用户要使用Linux系统,必须先进行登录.Linux的登录过程和win ...