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

　　

二、事例

　　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. libgdx学习记录7——Ui

    libgdx中的UI设计主要通过其对应的Style类进行实现,也可以通过skin实现.如果没有编辑好的skin文件,可以创建一个默认的skin,再添加已经设计好的style类即可,然后在需要使用的地方 ...

  2. R语言学习 第一篇：变量和向量

    R是向量化的语言,最突出的特点是对向量的运算不需要显式编写循环语句,它会自动地应用于向量的每一个元素.对象是R中存储数据的数据结构,存储在内存中,通过名称或符号访问.对象的名称由大小写字母.数字0-9 ...

  3. （2）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- .NetCore启动配置 和 .NetCoreWebApi

    什么是.Net Core?.Net Core是微软开发的另外一个可以跨Linux.Windows.mac等平台的.Net.Net Core相关知识看文章地步dotnet dllname.dll 运行P ...

  4. 简单模拟flume

    NetCat方式: 远程访问的方式进行消息传递 配置一个Agent,主要配置三个组件: source, channel, sink 上图中为什么channel会带s,变成channels? 可以绑定多 ...

  5. C++ string 类详解

    字符串是存储在内存的连续字节中的一系列字符.C++ 处理字符串的方式有两种,一种来自 C 语言,常被称为 C-风格字符串,另一种是基于 string 类库的字符串处理方式.C 风格字符串的处理可以参考 ...

  6. 剑指offer——滑动窗口的最大值

    给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别为{4,4,6,6,6, ...

  7. 了不起的Node.js--之四

    阻塞与非阻塞IO 绝大多数对node.js的讨论都把关注点放在了其处理高并发的能力上.Node框架给开发者提供了构建高性能网络应用的强大能力. 我使用的开发工具是Mac版的WebStorm,这个工具支 ...

  8. 20135202闫佳歆--week5 系统调用（下）--学习笔记

    此为个人笔记存档 week 5 系统调用(下) 一.给MenuOS增加time和time-asm命令 这里老师示范的时候是已经做好的了: rm menu -rf 强制删除 git clone http ...

  9. Beta阶段冲刺-1

    1. 新成员 新加入成员,克克飞同学,任务是去弄公众号相关的部分. 队员 个人简介 博客地址 杨晨露 每天都在开会的PM http://www.cnblogs.com/ycll/ 游舒婷 每天都在装死 ...

  10. DirectoryEntry_Properties属性的遍历(win2008)

    DirectoryEntry root = new DirectoryEntry(@"IIS://localhost/W3SVC"); string PInfo = "& ...