<!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. 【WPF】学习笔记（三）——这个家伙跟电子签名板有个约定

    这篇博客依旧是以电子签名板为基础而展开的,主要是对前文([WPF]学习笔记(一)--做一个简单的电子签名板)存在的部分问题进行解释,以及部分小功能的添加.由于这篇博客是建立在学习笔记一的基础上的,所以 ...

  2. TreeSet源码分析

    第1部分 TreeSet介绍 TreeSet 是一个有序的集合,它的作用是提供有序的Set集合.它继承于AbstractSet抽象类,实现了NavigableSet<E>, Cloneab ...

  3. hive、impala集成ldap

    1.概要 1.1 环境信息 hadoop:cdh5.10 os:centos6.7 user:root hive.impala已集成sentry 1.2 访问控制权限 这里通过使用openldap来控 ...

  4. (Unsupported class version number [52.0] (maximum 51.0, Java 1.7))

    遇到类似问题,主要原因是proguard版本只支持到java7,而我使用的是java8. 解决方法是下载最新proguard(支持java 8的版本),然后将下载的文件解压,将libs下jar与and ...

  5. bash shell中测试命令

    bash shell中测试命令 test命令提供了if-than语句中测试不同条件的途径.如果test命令中列出的条件成立,test命令就会退出并返回退出状态吗0 .这样if-than语句就与其他编程 ...

  6. spring service层单元测试

    service层测试较简单,目前大多数测试主要是针对public方法进行的.依据测试方法划分,可以分为两种:基于mock的隔离测试和基于dbunit的普通测试. mock隔离测试 配置pom.xml ...

  7. SmartCoder每日站立会议06

    站立会议内容 讨论了小程序的具体实现方式,主要会加入地图这一元素,使程序看起来更加的方便直观,同时也会使人感到新颖.在对各个点的评论对话功能也在考虑中. 1. 站立会议照片: 2.任务展板 3.燃尽图

  8. 机器学习：Python实现聚类算法(一)之AP算法

    1.算法简介 AP(Affinity Propagation)通常被翻译为近邻传播算法或者亲和力传播算法,是在2007年的Science杂志上提出的一种新的聚类算法.AP算法的基本思想是将全部数据点都 ...

  9. Jedis-returnResource使用注意事项

    遇到过这样一个严重问题: 发布的项目不知从什么时候开始,每月会出现一两次串号问题.串号现象指的是,用户用账号A登录系统,然后某个时间,登录账号自动变成了B. 串号出现的时间不定,测试平台难以重现,且后 ...

  10. 1089 Intervals(中文)

    开始前先讲几句废话:这个题我开始也没看懂,后来借助百度翻译,明白了大概是什么意思. 试题描述 输入一个n,然后输入n组数据,每个数据有两个数,代表这个闭区间是从几到几.然后看,如果任意两个闭区间有相重 ...