点击出现二级菜单

*{

				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. 【Linux】-- Linux上java运行环境的配置（JDK+TOMCAT）

    1.JDK安装 安装之前首先要查询软件是否存可以直接使用yum安装 yum search java | grep open 选择需要的版本安装 注意:*星号代表下载该版本的所有文件,不能少. 验证是否 ...

  2. (DP) 关于最优三角剖分

    https://www.cnblogs.com/Konjakmoyu/p/4905563.html 这个人写的好 最优三角剖分的核心思想: 确定决策顺序. 有时一个解可以用许多决策顺序得出, 这时候我 ...

  3. python底层原理

    有同学问到了一个问题,python中存储变量是通过内存地址来存储,那么python又是如何去判断内存中的地址是什么数据类型的呢.经过查找,找到这篇文章: 原博客地址:http://www.cnblog ...

  4. Django——图书管理系统

    基于Django的图书管理系统 1.主体功能 1.列出图书列表.出版社列表.作者列表 2.点击作者,会列出其出版的图书列表 3.点击出版社,会列出旗下图书列表 4.可以创建.修改.删除 图书.作者.出 ...

  5. Java 基础 Java平台的3个版本

    Java平台有3个版本:适用于小型设备和智能卡的JavaME(Java Platform Micro Edition,Java微型版).适用于桌面系统的JavaSE(Java Platform Sta ...

  6. postman基本使用

    一.安装 官网:https://www.getpostman.com/ Postman是一个Chrome的一个插件工具,我们可以通过Chrome的应用商店进行进行搜索并安装,安装完成会在桌面上显示一个 ...

  7. Array,prototype.concat.apply与[].conat.apply.

    一直都知道JS数组Array内置对象有一个concat方法,但是也没怎么研究过,今天偶然就看了看 concat是连接一个或多个数组 返回的是连接后数组的一个副本 var oldArr=[]; var ...

  8. Java课程课后作业190315之最大连续子数组（二维数组版）

    ,, 在本周的课堂上,老师再一次提高了要求,将一维数组升级成为了二维数组,然后求出块状的连续子数组. 一开始还想着借鉴之前球一维数组的O(n)的算法,后来还是没有找到头绪,舍友讲了自己的办法,但是没有 ...

  9. javascript的数组之reduce()

    reduce()方法对累加器和数组中的每个元素(从左到右)应用到一个函数中,最终得到一个值并返回 const array1 = [1, 2, 3, 4]; const reducer = (accum ...

  10. photoshop cc 2017安装

    https://jingyan.baidu.com/article/8ebacdf0700c0c49f65cd500.html