<!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. IO多路复用深入浅出

    前言 从零单排高性能问题,这次轮到异步通信了.这个领域入门有点难,需要了解UNIX五种IO模型和 TCP协议,熟练使用三大异步通信框架:Netty.NodeJS.Tornado.目前所有标榜异步的通信 ...

  2. 【JAVAWEB学习笔记】02_HTML&CSS

    //--------------纯文本版------------------------------------------------- 今日新增单词(更多属性查看手册) form:表单 (要提交的 ...

  3. 学习笔记TF009:对数几率回归

    logistic函数,也称sigmoid函数,概率分布函数.给定特定输入,计算输出"success"的概率,对回题回答"Yes"的概率.接受单个输入.多维数据或 ...

  4. EntityFramework6.X 之DbContex

    DbContext 数据库上下文DbContext是ObjectContext代表之一负责管理在运行时从数据库取数据.跟踪数据库的变更.对实体类映射到数据中持久化操作等,表示工作单元和存储库模式的组合 ...

  5. struts2.1.6教程十二、总结

    本教程对struts2的基本知识进行了一些说明,关于struts2的更多详细内容应参看struts2的官方文档及提供的app实例. 下面对struts2的基本执行流程作一简要说明,此流程说明可以结合官 ...

  6. 纯CSS3实现loading正在加载。。。

    场景分析:随着我司专职前端切图人员离职,切图的活重新落到我们小组团队成员的日常任务list里面,加上我们小组 7个前端 基本都是后台转的前端 (赶鸭子上架 前端现在需求量大 没办法) 加上自己也将就一 ...

  7. 实现图标Icon+文字在div里自动中心居中（水平垂直居中）

    已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...

  8. 学习笔记TF019:序列分类、IMDB影评分类

    序列分类,预测整个输入序列的类别标签.情绪分析,预测用户撰写文字话题态度.预测选举结果或产品.电影评分. 国际电影数据库(International Movie Database)影评数据集.目标值二 ...

  9. js背景自适应，学到了

    最近在做一个项目,要求实现背景自适应,何为背景自适应呢? 1.如果背景图高度不够,背景height是100%,background-size就应该是 100% auto 2.如果背景图宽度不够,背景w ...

  10. 【Web开发】Mean web开发 01-Express实现MVC模式开发

    简介 Mean是JavaScript的全栈开发框架.更多介绍 用Express实现MVC模式开发是Mean Web全栈开发中的一部分. Express 是一个基于 Node.js 平台的极简.灵活的 ...