<!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. wackoPicko 渗透平台的安装

    2016-05-17 wackoPicko 的介绍及下载地址        https://github.com/adamdoupe/WackoPicko#from=codefrom.com 首先我们 ...

  2. Fiddler 接口测试（Composer）的使用方法

    原文:Fiddler 接口测试(Composer)的使用方法 下载地址:https://www.telerik.com/download/fiddler 一.Composer简介 右侧Composer ...

  3. 【转】一天学会PHP(转)

    [转]一天学会PHP(转) 只需要一天,只要你用心去看和学,一定行. - 这里希望大家需要明白一点,这只是在讲如何快速入门,更好的认识PHP!也能初级掌握PHP基础知识!PHP语言博大精深!并不是一两 ...

  4. [读书]Python学习手冊--属性管理1

    属性管理-特性 一般开发这不必关心属性的实现.对工具的构建这来说,了解这一块对API的灵活性有帮助. 大多数情况下,属性位于对象自身之中.或者继承自对象所派生自的一个类. ----python学习手冊 ...

  5. 大浪淘沙，JSP终将死去

    首先讲明,我不是标题党. 这纯属我个人的意见.勿喷. 先来讲讲JSP是怎么出现的吧. 在早期的WEB中,JS.CSS远未成熟,技术慷慨向并不明白!因为前端语言的匮乏.各家大公司都推出基于后端的模板语言 ...

  6. 为什么button在设置标题时要用一个方法，而不像lable一样直接用一个属性

    为什么button在设置标题时要用一个方法.而不像lable一样直接用一个属性 原因是有时我们对      button做一次点击,须要改变button的标题.仅仅实用方法才干做到,而label是标签 ...

  7. 【金阳光測试】大话Android自己主动化測试--Android自己主动化系列（1）--金阳光于2013年4月份

    Android自己主动化測试框架和工具在四年多的发展日趋成熟. 从五年前的第一代自己主动化架构演进到眼下第四代(本系列讲座第7篇后将具体剖析第三代和第四代自己主动化框架)从曾经最早谷歌推崇的monke ...

  8. java基本数据类型复习

    1.基本取值范围及对应封装器(参考:http://www.cnblogs.com/Free-Thinker/p/4573068.html): 简单类型 boolean byte char short ...

  9. thinkphp5项目--个人博客（八）

    thinkphp5项目--个人博客(八) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...

  10. hpuoj--校赛--爬楼梯（模拟）

    问题 E: 感恩节KK专场--爬楼梯 时间限制: 1 Sec  内存限制: 1000 MB 提交: 382  解决: 89 [提交][状态][讨论版] 题目描述 来机房比赛的时候大家都会爬楼梯,但是每 ...