javascript 左侧菜单
<!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 左侧菜单的更多相关文章
- JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单
<!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...
- JavaScript目录菜单滚动反显组件的实现
JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...
- LayUI左侧菜单无法保持选中状态
1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...
- 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
- JS练习题（左侧菜单下拉+好友选中）
题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...
- 第一百四十八节，封装库--JavaScript，菜单切换
第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...
- ace admin 左侧菜单定位
后台模版来自:Ace Admin http://ace.jeka.by/form-elements.html 左侧菜单,通过js根据url来判断显示哪块 window.location.pathnam ...
- jquery实现左侧菜单 效果
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
随机推荐
- HDU-1024 Max Sum Plus Plus 动态规划 滚动数组和转移优化
题目链接:https://cn.vjudge.net/problem/HDU-1024 题意 给n, m和一个序列,找m个不重叠子串,使这几个子串内元素和的和最大. n<=1e6 例:1 3 1 ...
- Docker yum 安装
[liwm@Eren ~]$ sudo su[root@Eren liwm]# yum install -y docker 已加载插件:fastestmirror, langpacks, prod ...
- PKU 2184 Cow Exhibition 01背包
题意: 有一些牛,每头牛有一个Si值,一个Fi值,选出一些牛,使得max( sum(Si+Fi) ) 并且 sum(Si)>=0, sum(Fi)>=0 思路: 随便选一维做容量(比如Fi ...
- 编写使用systemctl启动服务脚本
CentOS 7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,像需要开机不登陆就能运行的程序,还是存在系统服务里吧,即:/usr ...
- Atitit.运行cmd 命令行 php
Atitit.运行cmd 命令行 php 1. 运行cmd 命令行,调用系统命令的基础 1 1.1. 实际运行模式 1 1.2. 空格的问题 1 1.3. 中文路径的问题.程序文件读取编码设置 1 1 ...
- NGUI研究之开发项目的一些使用心得比較细节
不知不觉使用NGI插件已经有一段时间了.感觉NGUI真的是眼下Unity3D中最好用的UI插件. 可是它也有一些不是BUG的BUG,这些问题可能会让新人摸不着头脑,那么这篇文章将总结一下这段时间 ...
- hdu_2795,线段树，单点更新
#include<iostream> #include<cstdio> #include<cstring> #define lson l,m,rt<<1 ...
- php中命名空间和use
php中命名空间和use 总结 php中的namespace就有点像java中package包的概念 php中的use的概念就是用别人的命名空间中的类 php中的include enquire是引入文 ...
- POJ 3256 Cow Picnic
Cow Picnic Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 4928 Accepted: 2019 Descri ...
- Android控件postDelayed用法,View自带的定时器
有一个需求是这样的,点击加关注按钮后,执行关注操作,成功后按钮文字变为“已关注”,保持3秒,三秒后按钮文字便问“取消关注”,点击后执行取消关注的操作 源码: public boolean postDe ...