<!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. HotSpot的算法实现

    1.枚举根节点 可达性分析中从GC Roots节点找引用,可作为GC Roots的节点主要是全局性的引用与执行上下文中,如果要逐个检查引用,必然消耗时间.另外可达性分析对执行时间的敏感还体现在GC停顿 ...

  2. 升讯威微信营销系统开发实践：（5） Github 源码：微信接口的 .NET 封装。

    微信开发系列教程,将以一个实际的微信平台项目为案例,深入浅出的讲解微信开发.应用各环节的实现方案和技术细节. 本系列教程的最终目标是完成一个功能完善并达到高可用性能指标的微信管理软件,所以除了与微信本 ...

  3. 企业账号打包如何通过HTML页面打开

    企业账号打包后 Plist文件加入前缀 href="itms-services://?action=download-manifest&url= Plist文件在服务器中的地址为:h ...

  4. bootstrap4中文版（纯手工翻译）

    1初步开始 1.1依赖 这个仓储包含一系列基于bootstrap标识和css样式的原生angular2指令.所以是不需要依赖jq和bootstrap.js的.只需要以下依赖即可: Angular(需要 ...

  5. 【对抗蠕虫】如何保护网页里的按钮，不被 XSS 自动点击

    前言 XSS 自动点按钮有什么危害? 在社交网络里,大多操作都是通过点击按钮发起的.例如发表留言,假如留言系统有 BUG,那么 XSS 就能自动点击发送按钮,发布带有恶意代码的留言.好友看了中招后,又 ...

  6. laravel实现excel表格导出

    记得引用一下excel,现在laravel5.2都默认自带的,不需要自己再 Composer安装依赖了. use Excel; 然后方法里这样写 //$cellData自己要进行导出的数组 Array ...

  7. void main（）， int main() 和int main（void）的区别

    1.区别是main()函数是否有返回值.2.void定义的函数没有返回值,int定义的函数返回整型值.3.void,字面意思是"无类型",常用在程序编写中对定义函数的参数类型.返回 ...

  8. 这是假的JS——利用CSS Animation实现banner图非交互循环播放

    话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...

  9. Java对象的内存布局

    对象的内存布局 平时用java编写程序,你了解java对象的内存布局么? 在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域: 对象头 实例数据 对齐填充 对象头 对象头包括两部分信息: ...

  10. os模块学习小随笔

    os模块为python解释器与操作系统交互的接口 os.popen()   -------Open a pipe to or from command. The return value is an ...