例题二、用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. [Mindjet MindManager]思维导图的快捷键操作

    来源于:http://www.cnblogs.com/whylaughing/p/5530935.html Mindjet MindManager(思维导图) 快捷键如下: Insert or CTR ...

  2. Android M 控件：Snackbar、Toolbar、TabLayout、NavigationView

    Snackbar Snackbar提供了一个介于Toast和AlertDialog之间轻量级控件,它可以很方便的提供消息的提示和动作反馈.Snackbar的使用与Toast的使用基本相同: Snack ...

  3. [转]实体类（VO，DO，DTO）的划分

    原文地址:http://blog.sina.com.cn/s/blog_7a4cdec80100wkyh.html 经常会接触到VO,DO,DTO的概念,本文从领域建模中的实体划分和项目中的实际应用情 ...

  4. iOS开发小技巧--学会包装控件(有些view的位置由于代码或系统原因,位置或者尺寸不容易修改或者容易受外界影响)

    一.百思项目中遇到了两处这样的问题, 第一处 - 是评论界面的headerView,由于直接把自己搞的xib加载了放在了那里,xib中setFrame写了好多-=  +=,每次滚动的时候,会频繁调用x ...

  5. java学习笔记--java中的基本数组[5]

    java基础很重要, 今天呆家看java视频,顺便总结前几周看的java书籍,做一下简单的总结:1:数组的声明,2:数组的赋值: 3:数组的方法: 声明一个数组主要有两种方式: //类型 []数组名字 ...

  6. Activiti 学习笔记记录（2016-8-31）

    上一篇:Activiti 学习笔记记录(二) 导读:上一篇学习了bpmn 画图的常用图形标记.那如何用它们组成一个可用文件呢? 我们知道 bpmn 其实是一个xml 文件

  7. Java非静态内部类中为什么不能有静态变量却可以有常量？

    如:public class InnerClassDemo{ int x; class A{ static int a = 0;//这样写是不合法的. static final int b=0;//这 ...

  8. Win7 单机Spark和PySpark安装

    欢呼一下先.软件环境菜鸟的我终于把单机Spark 和 Pyspark 安装成功了.加油加油!!! 1. 安装方法参考: 已安装Pycharm 和 Intellij IDEA. win7 PySpark ...

  9. 【caffe】cifar10例子之quick_train.sh在windows下的解决方案

    @tags caffe 照例还是转写为python脚本: import os caffe_root=os.environ['caffe_root'] caffe_build=os.environ['c ...

  10. 【BZOJ-4326】运输计划 树链剖分 + 树上差分 + 二分

    4326: NOIP2015 运输计划 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 703  Solved: 461[Submit][Status] ...