点击出现二级菜单

*{

				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. 20172328 2018-2019《Java软件结构与数据结构》第七周学习总结

    20172328 2018-2019<Java软件结构与数据结构>第七周学习总结 概述 Generalization 本周学习了第11章:二叉查找树.在本章中,主要探讨了二叉查找树的概念和 ...

  2. 16重新安装HA0.63

    2018-02-24 14:17:46 https://home-assistant.io/docs/installation/raspberry-pi/首先安装2017-11-29-raspbian ...

  3. 【C语言程序】法雷数列

    对任意给定的一个自然数n,将分母小于等于n的不可约的真分数按升序排列,并且在第一个分数之前加上0/1,在最后一个分数之后加上1/1,这个序列称为n级法雷数列,以Fn表示.如F5为:0/1,1/5, 1 ...

  4. node.js官方文档解析 02—buffer 缓冲器

    Buffer 类的实例类似于整数数组,但 Buffer 的大小是固定的.且在 V8 堆外分配物理内存.Buffer 的大小在被创建时确定,且无法调整. Buffer 类在 Node.js 中是一个全局 ...

  5. pytorch简介

    诞生 1.2017年1月,Facebook人工智能研究院(FAIR)团队在GitHub上开源了pyTorch,并迅速占领GitHub热度榜榜首. 常见深度学习框架简介 Theano 1.Theano最 ...

  6. [LeetCode] Most Profit Assigning Work 安排最大利润的工作

    We have jobs: difficulty[i] is the difficulty of the ith job, and profit[i] is the profit of the ith ...

  7. Java课后作业之石家庄地铁系统PSP表格20190403

    PSP2.1 Personal Software Process Stages Time Planning 计划 36 hours · Estimate · 估计这个任务需要多少时间 36 hours ...

  8. [Codeforces Round #508 (Div. 2)][Codeforces 1038E. Maximum Matching]

    前几天给舍友讲这题的时候感觉挺有意思的,就贴上来吧... 题目链接:1038E - Maximum Matching 题目大意:有\(n\)个棒子,每个条两端有颜色\(c1,c2\)以及他的价值\(v ...

  9. Jedis自己整理比较全的API

    package com.tebon.ams.utils; import com.alibaba.fastjson.JSON;import com.tebon.ams.util.ObjectUtil;i ...

  10. html表格以pdf格式导出到本地

    引入插件 jsPdf.js 以及 html2canvas.js,具体文件可上github找,实测可行html2canvas(document.getElementById("downBox& ...