例题二、用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. Django - 获取请求方式

    //获取请过来得得请求类型 method = request.method 通过Django 的form 判断用户输入是否通过验证 check = forms.LoginFrom(request.PO ...

  2. static 静态导包

    静态导入 ArrayUtils 类的 INDEX_NOT_FOUND 属性和 add 方法 import static org.apache.commons.lang3.ArrayUtils.INDE ...

  3. java环境变量设置

    java环境变量设置 1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Ja ...

  4. nutch-default.xml文件

    Nutch中的所有配置文件都放置在总目录下的conf子文件夹中,最基本的配置文件是conf/nutch-default.xml.这个文件中定义了 Nutch的所有必要设置以及一些默认值,它是不可以被修 ...

  5. maven打包忽略测试用例

    忽略单元测试失败: $ mvn test -Dmaven.test.failure.ignore=true 跳过单元测试: mvn install -Dmaven.test.skip=true 跳过测 ...

  6. shell实现两个数的相加

    刚开始的时候写,一直写不对:看似简单的功能,但是一定要小心:函数的定义: funciton functionName {.....}在functionName和{之间一定有空格啊! 我就是没加空格,就 ...

  7. an important difference between while and foreach on Perl

    while (<STDIN>) { } # will read from standard input one line at a time foreach (<STDIN>) ...

  8. 操蛋的CTex

    我一向是不屑于在windows下用latex的,看起来不伦不类,是geek就不要用windows,图方便就用word而不是latex.但是台式机上的fedora无法上网,那就委屈一下在windows1 ...

  9. 【BZOJ-1912】patrol巡逻 树的直径 + DFS（树形DP）

    1912: [Apio2010]patrol 巡逻 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 1034  Solved: 562[Submit][St ...

  10. codeforces 723B：Text Document Analysis

    Description Modern text editors usually show some information regarding the document being edited. F ...