<!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. BZOJ 2342 [Shoi2011]双倍回文（manacher+堆+set）

    题意 N<=500000 题解 维护一个set可以用堆来解决. #include<iostream> #include<cstring> #include<cstd ...

  2. 编辑距离Edit Distance 非常典型的DP类型题目

    https://leetcode.com/problems/edit-distance/?tab=Description 真的非常好,也非常典型. https://discuss.leetcode.c ...

  3. hihocoder 1124 : 好矩阵 dp

    好矩阵 时间限制:3000ms 单点时限:1000ms 内存限制:256MB 描写叙述 给定n, m.一个n × m矩阵是好矩阵当且仅当它的每一个位置都是非负整数,且每行每列的和 ≤ 2.求好矩阵的个 ...

  4. Android ADB工具-截图和录制视频(五)

    Android ADB工具-截图和录制视频(五) 标签(空格分隔): Android ADB 7. 截图和录制视 命令 功能 adb shell screencap –p <path/file& ...

  5. ACM POJ 1146 ID Codes

    题目大意:输入一个字符串.输出它的下一个字典序排列. 字典序算法思想: 1.从右向左寻找字符串找出第一个a[i]<a[i+1]的位置i; 2.从右向左找出第一个大于a[i]的元素a[j]; 3. ...

  6. Atitit.运行cmd 命令行 php

    Atitit.运行cmd 命令行 php 1. 运行cmd 命令行,调用系统命令的基础 1 1.1. 实际运行模式 1 1.2. 空格的问题 1 1.3. 中文路径的问题.程序文件读取编码设置 1 1 ...

  7. less13 颜色值函数

    //通过十进制红色,绿色,蓝色三种值 (RGB) 创建不透明的颜色对象. div{ background: rgb(255,0,0); background: rgb(100%,0%,0%); } / ...

  8. iOS开发－sqlite3使用

    SQLite3使用 SQLite简介 SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中. SQLite3 在XCode工程中,打开targets,在B ...

  9. zzulioj--1787--生活危机（vector+dfs 好题）

    1787: 生化危机 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 97  Solved: 29 SubmitStatusWeb Board Desc ...

  10. rest_framework 节流功能（访问频率）

    访问记录 = { 身份证号: [ :: ,::, ::] } #:: ,::,:: ,::, #:: #[::, ::, ::] #访问记录 = { 用户IP: [...] } import time ...