<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>实例016</title>

	<style>

		* {

			padding: 0;

			margin: 0;

		}

		.one {

			width: 200px;

			//height: 150px;

			margin: 0 auto;

			border: 1px solid #333;

		}

		.title {

			background-color: #333;

			width: 200px;

			height: 24px;

		}

		.title h3 {

			float: left;

			margin-left: 4px;

		}

		.tt {

			background-color: #666;

			border: 1px solid #666;

		}

		.ttx {

			background-color: #999;

			border: 1px solid #999;

		}

		.title h3 a {

			text-decoration: none;

			color: black;

		}

		.dis {

			display: none;

			background-color: #999;

		}

		li {

			list-style: none;

		}

	</style>

</head>

<body>

	<div id="one" class="one">

		<div class="title">

			<h3 class="tt" onmouseover="demo(0)"><a href="">选项一</a></h3>

			<h3 class="tt" onmouseover="demo(1)"><a href="">选项二</a></h3>

			<h3 class="tt" onmouseover="demo(2)"><a href="">选项三</a></h3>

		</div>

		<div class="content" id="con">

			<div class="dis">

				<ul>

					<li>111111</li>

					<li>222222</li>

					<li>333333</li>

					<li>444444</li>

				</ul>

			</div>

			<div class="dis">

				<ul>

					<li>我爱你</li>

					<li>你爱我</li>

					<li>我你爱</li>

					<li>爱你我</li>

					<li>爱我你</li>

				</ul>

			</div>

			<div class="dis">

				<ul>

					<li>han</li>

					<li>handsome</li>

					<li>handsomehan</li>

					<li>hanhandsome</li>

					<li>hanhan</li>

					<li>handsomehanhan</li>

					<li>hanhanhandsome</li>

				</ul>

			</div>

		</div>

	</div>

	<script>

		function demo(num) {

			var h3s = document.getElementsByTagName("h3");

			var cons = document.getElementById("con").getElementsByTagName("div");

			//alert(cons);

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

				if(i == num) {

					h3s[num].className="ttx";

					cons[num].style.display="block";

					cons[num].style.backgroundColor="#999";

				}else {

					h3s[i].className="tt";

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

				}

			}

		}

	</script>

</body>

</html>

　　

Example016实现下拉框的更多相关文章

  1. jquery实现下拉框多选

    一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...

  2. 利用js取到下拉框中选择的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...

  3. jquery禁用下拉框

    禁用下拉框 //下拉框禁用 $("select").each(function () { $("#" + this.id).attr("disable ...

  4. [原创]自己动手实现React-Native下拉框控件

    因项目需要,自己动手实现了一个下拉框组件,最近得空将控件独立出来开源上传到了Github和npm. Github地址(求Star 求Star 求Star 

  5. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  6. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

  7. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

  8. asp.net MVC4 表单 - 下拉框

    1.下拉框代码方式 控制器内构建下拉项目: List<SelectListItem> list = new List<SelectListItem>(); list.Add(n ...

  9. Jquery制作--美化下拉框

    平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...

随机推荐

  1. 深入理解Java虚拟机 自己编译JDK

    获取JDK源码 先明确OpenJDK和Sun/OracleJDK之间,以及OpenJDK 6.OpenJDK 7.OpenJDK7u和OpenJDK 8等项目之间是什么关系,这有助于确定接下来编译要使 ...

  2. ar1220f-s四条拨号光纤做的策略路由实现负载均衡

    acl number 3001  //内网数据流不需被重定向到外网出口. rule 5 permit ip source 192.168.0.0 0.0.255.255  destination 19 ...

  3. PHP导出生成excel文件

    composer包管理工具还是非常好用的 下载安装的扩展比较靠谱 无需自己解决扩展BUG 省时省力提高效率 1.下载安装composer自行百度 2.通过composer下载安装office 3.不在 ...

  4. Natas Wargame Level 16 Writeup(Content-based Blind SQL Injection)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqwAAADhCAYAAAANm+erAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  5. `DevOps`相关知识搜集

    本文记录的是搞清楚什么是DevOps过程中检索资料时发现的有价值的帖子. 传送门: 我眼中的DevOps 作者简介:申思维,2005年本科毕业于华南理工大学计算机学院.一直从事Web领域的开发,3年多 ...

  6. c++堆与栈的简单认识

    堆: 操作系统有一个记录空闲内存地址的链表,当系统收到程序的申请时,会遍历该链表,寻找第一个空间大于所申请空间的堆结点,然后将该结点从空闲结点链表中删 除,并将该结点的空间分配给程序,另外,对于大多数 ...

  7. nginx+tomcat+session共享(转)

    1 起因   最近对新开发的web系统进行了压力测试,发现tomcat默认配置下压到600人的并发登录首页响应速度就有比较严重的影响,一轮出现2000多个的 500和502错误.我把登录的时间统计做了 ...

  8. 如何通过 WebP 兼容减少图片资源大小

    作者:学军又拍云 CDN 服务公测 WebP 自适应功能,为客户减少图片资源大小.本文我们将一起来阐述WebP兼容的来龙去脉. 前言我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片 ...

  9. ASP.NET MVC Filter的思考

    思考了一下AOP的具体实现,后来想到ASP.NET MVC过滤器其实就是AOP的一种,于是从Filter下手研究AOP. 暂时先考虑AuthorizationFilter,ActionFilter,R ...

  10. 深入理解Java常用类-----StringBuilder

    上篇文章我们介绍过String这个常用类,知道了该类的内部其实是用的一个char数组表示一个字符串对象的,只是该字符数组被final修饰,一旦初始化就不能修改,但是对于经常做字符串修改操作的情况下,S ...