点击出现二级菜单

*{

				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. es6中的...三个点

    ...是es6中新添加的操作符,可以称为spread或rest 定义一个数组 let name=['小红','小明','小白']; 我们在控制台输出   console.log(name); 结果: ...

  2. jvm领域优秀博主

    dh5724 不过csdn iteye 博客园信息均被自己删除,只在一些问答中和引用中有部分信息. redcreen 对jvm有深入认知. RednaxelaFX oracle java 编译器开发者 ...

  3. Data Science Project

    https://drivendata.github.io/cookiecutter-data-science/

  4. Python金融大数据分析PDF

    Python金融大数据分析(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1CF2NhbgpMroLhW2sTm7IJQ 提取码:clmt 复制这段内容后打开百度网盘 ...

  5. 在Linux下开发多语言软件(gettext解决方案)

    最近的项目出现了一个bug.项目是基于一个已有的成熟开源软件之上做修改的,新写了加解密库,用于为该成熟开源软件增添加解密功能.功能增加完成后效果都很好,可是就是中文出不来了,也就是说没办法自适应多语言 ...

  6. __http原理__HTTP 协议简介

    HTTP 协议通信流程 超文本 除了文本以外,还有其他数据类型的内容 HTTP 协议 指计算机网络通信中 两台计算机之间所必须遵守的规定或规则 Hypertext Transport Protocol ...

  7. __http原理__01__通信流程_消息格式

    本文转自  菜鸟教程  一.HTTP协议(HyperText Transfer Protocol,超文本传输协议) 是因特网上应用最为广泛的一种网络传输协议, 是用于从万维网(WWW:World Wi ...

  8. 传统方式和插件方式 分别实现 分页 功能 pageHelper 插件

    实现分页  这里提供两种方式  一种是传统的分页方式  一种是基于pageHelper插件 实现的分类     推荐使用后者 前者是一般开发的方式   思路  先手动创建一个 pageUtil 工具 ...

  9. python语法_嵌套

    列表里面每个元素可以是不同的数据类型,每一个元素也可以是一个列表或者元组等, a = [[1,2,3],"a",13,(5,7,9,"dasd")] b = a ...

  10. 增值税发票 成都金锐发票IC卡读入

    黑盘-操作  打开发票领购---网络发票分发----点击查询--分发. 白盘操作: