点击出现二级菜单

*{

				margin:0px auto;

				padding:0px;

				}

			.yiji{

				width:200px;

				height:40px;

				background-color:red;

				color:#fff;

				text-align:center;

				line-height:40px;h

				vertical-align:middle;

				border:1px solid #FFF;

				}

			.erji1{

				width:200px;

				height:40px;

				background-color:#F63;

				color:#fff;

				text-align:center;

				line-height:40px;

				vertical-align:middle;

				border:1px solid #FFF;

				}

			#erji2{

				display:none;

                                }

			#erji3{

				display:none;

                                }

			#erji4{

				display:none;

                                }

        </style>

    </head>

    <body>

        <div class="yiji" onclick="Show('erji2')">首页</div>

        <div id="erji2">

        	<div class="erji1">1</div>

            <div class="erji1">1</div>

            <div class="erji1">1</div>

        </div>

        <div class="yiji" onclick="Show('erji3')">人才</div>

        <div id="erji3">

        	<div class="erji1">1</div>

            <div class="erji1">1</div>

            <div class="erji1">1</div>

        </div>

        <div class="yiji" onclick="Show('erji4')">市场</div>

        <div id="erji4">

        	<div class="erji1">1</div>

            <div class="erji1">1</div>

            <div class="erji1">1</div>

        </div>

    </body>

    <script type="text/javascript">

                function Show(a)

		{

			var a = document.getElementById(a);

			if(a.style.display == "block")

			{

				a.style.display = "none";

			}

			else

			{

				a.style.display = "block";

			}

		}

    </script>

点击后主菜单换成点击的内容

#caidan{

				width:200px;

				height:40px;

				border:1px solid #999;

				text-align:center;

				line-height:40px;

				vertical-align:middle;

				}

			.list{

				width:200px;

				height:40px;

				border:1px solid #999;

				border-top-width:0px;

				text-align:center;

				line-height:40px;

				vertical-align:middle;

				display:none;

				}

			#caidan,.list:hover{

				cursor:pointer;

				}

			.list:hover{

				background-color:#63F;

				}

 <div style="width:200px; height:400px;">

              <div id="caidan" onclick="Show()">中国</div>

            <div class="list" onclick="Xuan(this)">山东</div>

            <div class="list" onclick="Xuan(this)">济南</div>

            <div class="list" onclick="Xuan(this)">济宁</div>

            <div class="list" onclick="Xuan(this)">威海</div>

            <div class="list" onclick="Xuan(this)">淄博</div>

        </div>

function Show()

		{

			var list = document.getElementsByClassName("list");

			//显示列表

			for(var i=0;i<list.length;i++)

			{

				list[i].style.display = "block";

			}

		}

		function Xuan(a)

		{

			var c = document.getElementById("caidan");

			c.innerHTML = a.innerHTML;

			var list = document.getElementsByClassName("list");

			//显示列表

			for(var i=0;i<list.length;i++)

			{

				list[i].style.display = "none";

			}	

		}

js点击出现二级菜单，点击二级菜单主菜单换成二级菜单的更多相关文章

  1. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. layui菜单点击刷新，自适应

    最近在项目上用layui框架后台iframe版,遇到的一些问题分享: 1.项目的左侧菜单点击对应的子菜单能自动刷新问题. 2.除了在左侧有菜单,还需要在右侧需要一个菜单(跳转到新页面),并且能够伸缩自 ...

  3. Maven问题总结：Eclipse中项目右键菜单中点击Maven->Update Projects时JDK被重置

    Eclipse中在项目右键菜单点击->Maven->Update Projects时,JDK总是切回 1.5 如果没有在Maven中配置过JDK版本,只是在Eclipse中项目的Prope ...

  4. JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  6. django 权限设置 左侧菜单点击显示，面包屑

    1.左侧菜单点击显示 就是在点击的时候保留点击的功能 方法. 1.加入新的字段,pid来判断 class Permission(models.Model): """ 权限 ...

  7. js手机端判断滑动还是点击

    网上的代码杂七杂八,  我搞个简单明了的!!  你们直接复制粘贴,  手机上 电脑上 可以直接测试!!! 上图: 上代码: <!DOCTYPE html> <html lang=&q ...

  8. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

  9. 【前端JS】radio 可单选可点击取消选中

    普通情况下 radio 单选框仅仅能实现多选一的效果,可是一旦选择当中一个后,这个单选框就不可点击取消其选中状态了.这样的功能在某些业务环境下并不适用.有时我们既须要单选框的多选一效果.也须要复选框的 ...

随机推荐

  1. PSO：利用PSO+ω参数实现对一元函数y = sin(10*pi*x) ./ x进行求解优化，找到最优个体适应度—Jason niu

    x = 1:0.01:2; y = sin(10*pi*x) ./ x; figure plot(x, y) title('绘制目标函数曲线图—Jason niu'); hold on c1 = 1. ...

  2. datatables隐藏列与createdRow渲染bootstrapSwitch形成的BUG

    背景: 昨天写了一个页面用于规则库的增删改查. 数据使用datatables渲染,后端返回数据由前端进行一次性渲染和分页. 隐藏列: 排序的ID不展示,但是排序又想按照ID来排,所以把ID单独作为一列 ...

  3. BBS+Blog项目开发

    BBS+Blog项目开发 目前本项目已经上线,可以直接在GEEK浏览本项目效果:GEEK 1.项目需求 基于ajax和用户认证组件实现登录验证 基于ajax和form组件实现注册功能 系统首页文章列表 ...

  4. request请求携带证书,如：微信企业零钱付款

    const Promise = require('bluebird') const request = Promise.promisifyAll(require('request')) const w ...

  5. Linux bash基础特性一

    命令别名 alias cdnet=”cd /etc/sysconfig/network-scripts” 针对用户的别名: “~/.bashrc” 针对系统的别名:”/etc/bashrc” 重读配置 ...

  6. Java逆向武器库_反编译工具

    1.反编译工具之_jd-gui 官网下载地址:http://java-decompiler.github.io/#jd-gui-download 使用: 下载后解压直接使用即可. jd-gui的优势是 ...

  7. Node.js_Buffer 缓冲区

    Buffer 缓冲区 虽然 JavaScript 支持未操作,但是并没有 二进制数据 的原生 node 引入了 Buffer 类,用于操作二进制数据 是 V8 引擎的扩展,实际上是对内存的直接分配 每 ...

  8. CodeForces #549 Div.2 D. The Beatles

    题目 解题思路 关键是要 ,找出L 的组合,然后遍历L的组合,用最大公约数就可以算出来当前L的值要停多少次 怎么找出L的组合呢?饭店是每隔K 有一个,是重复的,我们只需要算出第一个饭店两侧,起点和停顿 ...

  9. 解决：vue项目中多个echarts图表只有最后一个随浏览器变化改变大小

    window.onresize = () => { this.initChart()} 改为 window.addEventListener('resize', () => { this. ...

  10. C#获取本周五日期字符串

    using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using ...