<!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. HDU-3065 病毒侵袭持续中 字符串问题 AC自动机

    题目链接:https://cn.vjudge.net/problem/HDU-3065 题意 跟上一道题是几乎一模一样,这次是统计关键词的出现次数 一个相当坑的地方,注意多组样例 思路 套模版 改in ...

  2. BZOJ 1050 [HAOI2006]旅行comf（最小生成树）

    题意 第一行包含两个正整数,N和M.下来的M行每行包含三个正整数:x,y和v.表示景点x到景点y之间有一条双向公路 ,车辆必须以速度v在该公路上行驶.最后一行包含两个正整数s,t,表示想知道从景点s到 ...

  3. 越努力越幸运--动态数组vector

    最近回忆山哥写的stl,觉得很好用,也写了一份. 感谢群里的大佬帮忙review,还是很多的问题的. code:https://github.com/HellsingAshen/vector_c.gi ...

  4. MySQL 高可用：mysql+mycat实现数据库分片（分库分表）

    本文引用于http://blog.csdn.net/kk185800961/article/details/51147029 MySQL 高可用:mysql+mycat实现数据库分片(分库分表) 什么 ...

  5. 洛谷 P1373 小a和uim之大逃离 （差值型dp总结）

    这道题和多米诺骨牌那道题很像 ,都是涉及到差值的问题. 这道题是二维的,同时要取模. 这种题,因为当前的决策有后效性,会影响到差值,所以直接把 差值作为维度,然后计算答案的时候把差值为0的加起来就行了 ...

  6. debug和release的区别

    Debug和Release,主要是针对其面向的目标不同的而进行区分的.Debug通常称为调试版本,通过一系列编译选项的配合,编译的结果通常包含调试信息,而且不做任何优化,以为开发人员提供强大的应用程序 ...

  7. 小A点菜 水题 dp 背包

    基本上还是01背包,首先注意必须正好花光钱,所以初始化时除了dp[0]以外其他都要设置成inf,然后因为求方案数,所以基本方程为dp[i] = dp[i-x] + dp[i],再根据inf进行一些特殊 ...

  8. 与Greenplum度过的三个星期

    5月4日-5月24日.断断续续折腾了三个星期的Greenplum,总算告一段落了:扩容,发现扩不成容.仅仅好升级.升级,发现一堆错误,仅仅好暂停修复数据库:修好了,继续升级.升完级,发现错误.修啊修啊 ...

  9. BZOJ2179: FFT快速傅立叶 & caioj1450:【快速傅里叶变换】大整数乘法

    [传送门:BZOJ2179&caioj1450] 简要题意: 给出两个超级大的整数,求出a*b 题解: Rose_max出的一道FFT例题,卡掉高精度 = =(没想到BZOJ也有) 只要把a和 ...

  10. 9. IntelliJ Idea 集成svn 和使用

    转自:http://www.cnblogs.com/zhanghaoliang/p/6206948.html 最近公司的很多同事开始使用IntelliJ Idea,便尝试了一下,虽然快捷键与eclip ...