例题二、用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. extjs的一些简单动画1

    Ext.Element 类也定义了部分动画函数.我们先来看看Ext.Fx 类中的重要方法. 1.slideIn ( [String anchor], [Object options] ): 功能:滑入 ...

  2. 2016年GitHub 排名前 100 的安卓、iOS项目简介（收藏）

    排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过滤了跟 Android 不相关的项目, 所以排名并不具备任何官方效力, 仅供参考学习, 方便初学者 ...

  3. 网络流最小割 POJ 3469

    题意  2个CPU n个任务 给出在第一个 第二个运行时的花费 m  个  a  b 不在同一个CPU运行的额外花费 建图 源点 ->   n    -> 汇点 权          a1 ...

  4. js ajax请求

    var XMLHttpReq; function createXMLHttpRequest() { try { XMLHttpReq = new ActiveXObject("Msxml2. ...

  5. js-处理千分符

      <html> <head> <title> JS千分位处理 </title> </head> <script> functi ...

  6. 使用IDEA自带的rest client参数传递乱码问题

     在idea使用rest client(idea自带的访问请求地址工具)调试的时候,有时出现中文会乱码的情况    解决方法如下:   1.打开IDEA安装路径下的bin文件夹里面的idea64.ex ...

  7. Eclipse中使用SVN

    1.在Eclipse里下载Subclipse插件   方法一:从Eclipse Marketplace里面下载 具体操作:打开Eclipse --> Help --> Eclipse Ma ...

  8. hive 使用笔记（table format；lateral view）

    1. create table 创建一张目标表,指定分隔符和存储格式: create table tmp_2 (resource_id bigint ,v int) ROW FORMAT DELIMI ...

  9. Leetcode Odd Even Linked List

    Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...

  10. 【BZOJ-3709】Bohater 贪心

    3709: [PA2014]Bohater Time Limit: 5 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 835  Solved:  ...