例题二、用div做下拉列表

<title>无标题文档</title>

<style type="text/css">

*{ margin:0px auto; padding:0px}

#xiala{ width:180px; height:33px; border:1px solid #999;text-align:center; line-height:33px; vertical-align:middle; }

#xiala:hover{ cursor:pointer}

#zi{width:180px; height:150px; border:1px solid #63C; border-top:0px; display:none}

.list{width:180px; height:33px; text-align:center; line-height:33px; vertical-align:middle; border-bottom:1px solid #63C; background-color:#CCC}

.list:hover{ cursor:pointer; background-color:#63C; color:white}

</style>

</head>

<body>

<div style="width:700px; height:500px; margin-top:30px">

　　<div id="xiala" onclick="Show()"></div>

　　<div id="zi">

　　　　<div class="list" onclick="Xuan(this)">山东</div>//this表示一个元素这个元素相当于它本身。this写在哪一行里，就相当于这一行本身。

　　　　<div class="list" onclick="Xuan(this)">淄博</div>

　　　　<div class="list" onclick="Xuan(this)">张店</div>

　　</div>

</div>

</body>

<script type="text/javascript">

function Show()

{

　　document.getElementById("zi").style.display="block";

}

function Xuan(ys)//ys代表选中的元素（山东、淄博、张店所在的div）

{

　　var v = ys.innerText;

　　document.getElementById("xiala").innerText = v;

　　document.getElementById("zi").style.display="none";

}

</script>

9月23日JavaScript作业----用DIV做下拉列表的更多相关文章

  1. 9月23日JavaScript作业----日期时间选择

    作业二:日期时间选择 <div style="width:600px; height:100px;"> <select id="year"&g ...

  2. 9月23日JavaScript作业----子菜单下拉

    例题一.子菜单下拉 <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700p ...

  3. 9月23日JavaScript作业----两个列表之间移动数据

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  4. 5月23日 JavaScript

    一.JavaScript简介 1.JavaScript是什么: 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它的用法: 在HTML中位置有三块: (1)head里面 (2)bod ...

  5. 5月23日 JavaScript练习：累加求和

    第一种方法: 第二种方法:

  6. Week16（12月23日）：复习

    Part I:提问 =========================== 1.声明强类型视图时,使用关键字(    ) A.ViewBag    B.model    C.Type    D.Tit ...

  7. 2016年12月23日 星期五 --出埃及记 Exodus 21:18

    2016年12月23日 星期五 --出埃及记 Exodus 21:18 "If men quarrel and one hits the other with a stone or with ...

  8. [分享] 从定制Win7母盘到封装详细教程 By BILL （ 10月23日补充说明 ）

    [分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...

  9. 11月23日《奥威Power-BI报表集成到其他系统》腾讯课堂开课啦

    听说明天全国各地区都要冷到爆了,要是天气冷到可以放假就好了.想象一下大冷天的一定要在被窝里度过才对嘛,索性明天晚上来个相约吧,相约在被窝里看奥威Power-BI公开课如何?        上周奥威公开 ...

随机推荐

  1. Intent和Intent Filters

    什么是Intent     Intent是android开发中的重要对象,它作为一个信息承载对象存在.     我们可以在使用其他一些组件的时候从Intent获取行为响应的准则(即应该做什么东西,如何 ...

  2. android获得图片

    首先是相册图片的获取: private final String IMAGE_TYPE = "image/*"; private final int IMAGE_CODE = 0; ...

  3. Mybatis学习--Mapper.xml映射文件

    简介 Mapper.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 映射文件中有很多属性,常用的就是parameterType(输入类型 ...

  4. RAID的简单介绍

    该文章全部复制转载于:http://blog.jobbole.com/83808/,只为做笔记供自己查看 简介 RAID是一个我们经常能见到的名词.但却因为很少能在实际环境中体验,所以很难对其原理 能 ...

  5. Swift开发小技巧--private访问修饰符报错的情况

    1.Swift中的访问修饰符(三个,作用:用来修饰属性,方法和类) public : 最大权限 -- 可以在当前framework和其他framework中访问 internal : 默认的权限 -- ...

  6. Dubbo系列(3)_官方Demo说明

    一.本文目的     通过Dubbo的官方Demo介绍,学会搭建一个简单的Dubbo程序,包括服务端.客户端.接口等. Demo地址:https://github.com/alibaba/dubbo/ ...

  7. quartz使用案例

    @Service public class QuartzServiceImpl extends BaseServiceImpl<JobDetails, String, QuartzTaskVO& ...

  8. 系统间通信（3）——IO通信模型和JAVA实践 上篇

    来源:http://blog.csdn.net/yinwenjie 1.全文提要 系统间通信本来是一个很大的概念,我们首先重通信模型开始讲解.在理解了四种通信模型的工作特点和区别后,对于我们后文介绍搭 ...

  9. wordpress模板各文件函数解析

    修改主题时发现好多WordPress主题函数都不了解,因此网上摘抄了一份放在自己博客上,便于以后好找. 在WordPress中如何按你的意愿显示页面,关键看你是否了解WordPress主题模板页面.这 ...

  10. bzoj2200: [Usaco2011 Jan]道路和航线

    先忽略航线,求出图中所有连通块,再用航线拓扑排序求出每个连通块的优先级 然后dijkstra时优先处理优先级高的块里的点就行了 ps:这题SPFA会TLE #include <iostream& ...