<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .item .header{

            height: 35px;

            background-color: #2459a2;

            color: white;

            line-height: 35px; /*放置垂直*/

        }

    </style>

</head>

<body>

    <div style="height: 48px"></div>

    <div style="width: 300px">

        <div class="item">

            <div id='i1' class="header" onclick="ChangeMenu('i1')">菜单一</div>

            <div class="content">

                <div>内容1</div>

                <div>内容1</div>

                <div>内容1</div>

            </div>

        </div>

        <div class="item">

            <div id = 'i2' class="header" onclick="ChangeMenu('i2')">菜单二</div>

            <div class="content">

                <div>内容2</div>

                <div>内容2</div>

                <div>内容2</div>

            </div>

        </div>

        <div class="item">

            <div id = 'i3' class="header" onclick="ChangeMenu('i3')">菜单三</div>

            <div class="content">

                <div>内容3</div>

                <div>内容3</div>

                <div>内容3</div>

            </div>

        </div>

    </div>

    <!--修改菜单功能-->

    <script>

        function ChangeMenu(mid) {

            var current_header = document.getElementById(mid); //当前头部

            console.log(current_header);

            var current_base_header = current_header.parentElement.parentElement

            console.log(current_base_header);

            var current_list = current_base_header.children;

            for(var i=;i<current_list.length;i++){

                var current_item = current_list[i];

                current_item.children[].classList.add("hide");

            }

            current_header.nextElementSibling.classList.remove('hide')

        }

    </script>

</body>

</html>

javascript 左侧菜单的更多相关文章

  1. JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单

    <!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...

  2. JavaScript目录菜单滚动反显组件的实现

    JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...

  3. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

  4. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

  5. JS练习题（左侧菜单下拉+好友选中）

    题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...

  6. 第一百四十八节，封装库--JavaScript，菜单切换

    第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...

  7. ace admin 左侧菜单定位

    后台模版来自:Ace Admin http://ace.jeka.by/form-elements.html 左侧菜单,通过js根据url来判断显示哪块 window.location.pathnam ...

  8. jquery实现左侧菜单 效果

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  9. python : jquery实现左侧菜单

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

随机推荐

  1. rem — 一个低调的css单位

    原文  http://www.zhaoan.org/1825.html rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃 ...

  2. java几种远程服务调用协议的比较

    原文地址:http://www.cnblogs.com/jifeng/archive/2011/07/20/2111183.html 一.综述 本文比较了RMI,Hessian,Burlap,Http ...

  3. * ？ 【a-z】【0-9】通配符 学习

    通配符顾名思义就是通用的匹配信息的符号,比如星号(*)就是代表匹配零个或多个字符,问号(?)是代表匹配单个字符,中括号内加上数字[0-9]代表匹配单个阿拉伯数字的字符,而中括号内加上字母[abc]则是 ...

  4. [LeetCode] 455. 分发饼干 assign-cookies(贪心算法)

    思路: 尽量先将小饼干分配给胃口小的孩子,故而饼干和孩子胃口都应该先排序. python中,a.sort()只能用于a为list, sort()是可变对象的方法,无参数,无返回值,但会影响改变对象. ...

  5. 洛谷 P1088 火星人 （全排列）

    直接调用next_permutation即可,向前的话可以调用prev_permutation #include<cstdio> #include<cctype> #inclu ...

  6. ztree实现根节点右击事件，显示添加删除

    需求,右击树节点,出现编辑和删除的提示框 1:在setting 配置里面,给callback设置,右击事件onRightClick: 2:写一个函数onRightClick function onRi ...

  7. Android Bitmap太大导致ImageView不显示的问题

    今天做我们的智能相冊的项目时,遇到了非常奇妙的问题,当照片太大时,导致ImageView.setImageBitmap不显示,上网上搜了非常多办法.感觉都不是那么靠谱.最后使用了简单粗暴的手段: // ...

  8. hdu 2037 贪心

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  9. nodejs 实现简单 http 代理并缓存

    var http = require('http'), fs = require("fs"), url = require('url'), querystring = requir ...

  10. UNIX环境高级编程之第４章：文件和文件夹－习题

    4.1 stat函数是尾随符号链接的,所以用stat替换lstat不会显示符号链接的信息 4.2 在一个目录下先再shell中输入umask shell进程再进行创建文件的操作.其权限抖都会被屏蔽 4 ...