<!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. js实用方法记录-js动态加载css、js脚本文件

    js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

  2. xcode实用快捷键

    command + R 快速编译并运行项目 command + . 停止正在运行的项目 command + shift + O 快速打开xcode文件搜索功能 command + 0 关闭左边的侧边栏 ...

  3. 关于Cookie安全性设置的那些事

    一.标题:关于Cookie安全性设置的那些事 副标:httponly属性和secure属性解析 二.引言 经常有看到XSS跨站脚本攻击窃取cookie案例,修复方案是有httponly.今天写出来倒腾 ...

  4. iOS系统原生 二维码的生成、扫描和读取（高清、彩色）

    由于近期工作中遇到了个需求:需要将一些固定的字段 在多个移动端进行相互传输,所以就想到了 二维码 这个神奇的东东! 现在的大街上.连个摊煎饼的大妈 都有自己的二维码来让大家进行扫码支付.可见现在的二维 ...

  5. 写markdown博客如何截图并快速上传到图床——记一个工具插件的实现

    1. 背景 写博客有一个自己的图床是不错的选择,如果不借助工具,在markdown博客中添加图片的步骤如下: 截取图片,保存到本地(得来回点对话框,选择保存路径,选择文件类型,输入文件名). 上传到图 ...

  6. cas4.2.7与shiro进行整合

    准备工作 cas单点登录开始前准备,请参考cas4.2.7实现单点登录. 与shiro进行整合 注:准备工作的基础上,对cas客户端进行如下改进. 引入相关jar包 shiro-cas-1.2.6.j ...

  7. 一不小心，陷入TCP的性能问题

    一.现象 在一次访问请求nginx中,通常只需要几毫秒的RT,但当请求数据达到某一个数值时,rt明显提高,甚至超过了300毫秒. 二.问题的原因 大家都知道,TCP为了提高带宽利用率和吞吐量,做了各种 ...

  8. 运行容器的最佳实践 - 每天5分钟玩转 Docker 容器技术（24）

    按用途容器大致可分为两类:服务类容器和工具类的容器. 1. 服务类容器以 daemon 的形式运行,对外提供服务.比如 web server,数据库等.通过 -d 以后台方式启动这类容器是非常合适的. ...

  9. mysql安装报错

    一: -- MySQL 5.5.22Warning: Bison executable not found in PATH-- Configuring done-- Generating done-- ...

  10. spring管理配置文件的工厂类--PropertiesFactoryBean

    使用这个工厂的配置,可以很方便的获取配置文件中的属性.具体使用如下; 对于属性配置,一般采用的是键值对的形式,如: key=value 属性配置文件一般使用的是XXX.properties,当然有时候 ...