点击出现二级菜单

*{

				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. 表单组件 form fastadmin（生成表单元素）

    Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...

  2. 如何避免OOM

    一.减小对象的内存占用 1)使用更加轻量的数据结构 例如,我们可以考虑使用ArrayMap/SparseArray而不是HashMap等传统数据结构. ArrayMap和HashMap主要不同之处在于 ...

  3. 【最短路+最大流】上学路线@安徽OI2006

    目录 [最短路+最大流]上学路线@安徽OI2006 PROBLEM SOLUTION CODE [最短路+最大流]上学路线@安徽OI2006 PROBLEM 洛谷P4300 SOLUTION 先在原图 ...

  4. mapState ,mapGetters ,mapMutations,mapActions

    参考 http://www.imooc.com/article/14741

  5. Python练手例子（8）

    43.模仿静态变量(static)另一案例. 程序分析:演示一个python作用域使用方法. #python3.7 class Num: nNum = 1 def inc(self): self.nN ...

  6. Asch PK Lisk系列之一：安全性

    在币圈,听到对数字货币的质疑之声从来没少过.为什么有人会质疑呢?他们列出了很多理由(以下四点内容摘自网络): 数字货币是依附于网络的,而中国并没有独立自主的网络技术,容易被敌对势力利用数字货币损害中国 ...

  7. day 24 二十四、组合、继承、方法重写和重用、super（）

    一.组合 1.定义:自定义类的对象作为类的属性 A类的对象具备某一个属性,该属性的值是B类的对象 基于这种方式就把A类与B类组合到一起 对象既能使用A类中的数据与功能,也能使用B类中的数据与功能 2. ...

  8. LeetCode 871 - 最低加油次数 - [贪心+优先队列]

    汽车从起点出发驶向目的地,该目的地位于出发位置东面 target 英里处. 沿途有加油站,每个 station[i] 代表一个加油站,它位于出发位置东面 station[i][0] 英里处,并且有 s ...

  9. :before和::before的区别

    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素.伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示, ...

  10. [Day18]集合框架Collection、迭代器、增强for循环以及泛型

    1.集合 1.1集合-本身是一个存储的容器 集合类的基本接口是Collection接口,这个接口有两个基本方法 (1)boolean add(E element) 用于向集合中添加元素,如果添加元素确 ...