<!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. BZOJ3796 Mushroom追妹纸（二分答案+后缀数组+KMP）

    求出一个串使得这个串是\(s1,s2\)的子串.串中不包含\(s3\). 如果没有这个\(s3\)就可以二分答案,然后height小于二分值分一组.看看每组里是不是出现过\(s1,s2\)的后缀.判断 ...

  2. 微信小程序 上传图片

    效果图  如上,js  如下,在页面循环图片就可以 /** * 选择图片 */ uploadImgAdd: function(e) { var imgs = this.data.imgs; wx.ch ...

  3. Hibernate简单的保存操作

    1.这里面我想先说一下session对象的创建,这个是我们操纵数据库的核心对象,因此首先我们应该获取相应的session对象. public static Configuration cfg; pub ...

  4. 集团公司（嵌入ETL工具）財务报表系统解决方式

    集团公司(嵌入ETL工具)財务报表系统解决方式 一.项目背景: 某集团公司是一家拥有100多家子公司的大型集团公司,旗下子公司涉及各行各业,包含:金矿.铜矿.房产.化纤等.因为子公司在业务上的差异.子 ...

  5. Effective C++ 11-17

    11.为须要动态分配内存的类声明一个拷贝构造函数和一个赋值操作符. 显然,由于动态内存分配,绝对会有深浅拷贝的问题,要重写拷贝构造函数.使其为深拷贝,才干实现真正意义上的拷贝.这是我理解的关于要声明拷 ...

  6. c++_benchMark_vector_list_deque

    title: c++_benchMark_vector_list_deque date: 2015-08-01 22:32:39 作者:titer1 + ZhangYu 出处:www.drysalte ...

  7. IOS音频架构之Audio Unit

    在前面的章节部分我们已经对IOS音频结构有了一个清晰的认识,知道Audio Unit是位于整个音频结构的最底层,这一层非常多API已经開始和硬件打交道了.所以比較复杂,有了前面的基础再来看这个部分就比 ...

  8. flatMap作用

    总结:1. map会将每一条输入映射为一个新对象.{苹果,梨子}.map(去皮) = {去皮苹果,去皮梨子} 其中: “去皮”函数的类型为:A => B 2.flatMap包含两个操作:会将每一 ...

  9. Persistence

    Most of the programs we have seen so far are transient in the sense that they run for a short time a ...

  10. Nordic Collegiate Programming Contest 2015​(第七场)

    A:Adjoin the Networks One day your boss explains to you that he has a bunch of computer networks tha ...