Example016实现下拉框
<!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实现下拉框的更多相关文章
- jquery实现下拉框多选
一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...
- 利用js取到下拉框中选择的值
现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...
- jquery禁用下拉框
禁用下拉框 //下拉框禁用 $("select").each(function () { $("#" + this.id).attr("disable ...
- [原创]自己动手实现React-Native下拉框控件
因项目需要,自己动手实现了一个下拉框组件,最近得空将控件独立出来开源上传到了Github和npm. Github地址(求Star 求Star 求Star
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
- jquery Combo Select 下拉框可选可输入插件
Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...
- struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)
针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...
- asp.net MVC4 表单 - 下拉框
1.下拉框代码方式 控制器内构建下拉项目: List<SelectListItem> list = new List<SelectListItem>(); list.Add(n ...
- Jquery制作--美化下拉框
平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...
随机推荐
- Item 27: 明白什么时候选择重载，什么时候选择universal引用
本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 Item 26已经解释了,不管是对全局函数还是成员 ...
- vim 编辑中执行正则表达式
1.进入vim 编辑模式 2.输入:set magic 3.输入/,然后再次输入正则表达式
- [Angularjs]$http.post与$.post
摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇到在服务端无法接受到参数的情况,这里有必要与$.post进行比较学习一下. 一个例子 这里模拟登录的一个场 ...
- Android 工程集成React Native 0.44 注意点
当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...
- springcloud(七)：配置中心svn示例和refresh
上一篇springcloud(六):配置中心git示例留了一个小问题,当重新修改配置文件提交后,客户端获取的仍然是修改前的信息,这个问题我们先放下,待会再讲.国内很多公司都使用的svn来做代码的版本控 ...
- 调整分区大小(ext2\ext3\ext4)
现在的时间是2017年5月27日 我想说调整分区大小没那么麻烦,至少我直接将一个ext3格式分区从50G减少到了30G. 步骤如下 1 首先确保那个分区是没被挂载的. 2 调整分区大小,但是其实并没有 ...
- ORACLE的监听日志太大，客户端无法连接
数据库sqlplus能连接,plsql连接失败,也不报错,就定位到了是不是监听出了什么问题,删除监听,重建监听,重启监听,各种尝试都没解决问题. 却是监听日志太大导致的问题,一下是处理步骤: 查看监听 ...
- Assert与内存泄漏
以前知道C/C++有assert之后,我想知道assert会不会造成内存泄漏,于是我做了一个测试: #include <iostream> #include <fstream> ...
- ThinkPHP5.0更改框架的验证方法对象->validate(true)->save();
我们更希望看到: // 新增对象至数据表 $result = $Teacher->validate(true)->save(); 而不是: // 新增对象至数据表 $result = $T ...
- Java之进程与线程练习
1.设计一个线程类:创建3个子线程,每个线程分别打印数字,分别睡眠100,200,300ms ->每个执行都是20次 代码: package Homework; //1.设计一个线程类:创建3个 ...