例题二、用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. android相关技术及岗位

    Android应用开发    Android底层嵌入式    Android架构师 应用开发路线javaSE-->java for Android——>eclipse使用技巧-->A ...

  2. 89c51中断入口地址表

    中断源   中断入口地址 外部中断0 0003H 定时器/计数器T0 000BH 外部中断1 0013H 定时器/计数器T1 001BH 串行口中断   0023H

  3. QMenu，contextmenuevent，窗体透明

    void MainWindow::contextMenuEvent(QContextMenuEvent *event) { QMenu *menu=newQMenu; menu->addActi ...

  4. Eclipse导入 appcompat，design兼容包

    从Android studio推出1.0正式版后,就一直在as上开发项目,但是最近要测试一个项目,是eclipse结构,导入as后,是各种报错信息,决定改成eclipse. 其中项目中用到了ppcom ...

  5. FTP 的搭建过程和遇到的问题

    http://linux.it.net.cn/e/server/ftp/2015/0227/13554.htmlhttps://mp.weixin.qq.com/s?__biz=MzA3OTgyMDc ...

  6. 【BZOJ 2820】YY的GCD

    线性筛积性函数$g(x)$,具体看Yveh的题解: http://sr16.com:8081/%e3%80%90bzoj2820%e3%80%91yy%e7%9a%84gcd/ #include< ...

  7. <诗经>的由来

    <人间词话七讲> 第一讲 那是一个把各地的歌谣都编辑在一起的collection. 而且, 它被编辑的时候有一个目的, 在周朝的时候有采诗之官, 他们采集各地的歌谣, 以观民风, 用来给周 ...

  8. c#学习<一> 基础知识

    http://www.25hoursaday.com/CsharpVsJava.html ECMA-334 关键字 累计103 个,其中关键字77个,上下文关键字26个.(c#5.0) 标识符 1. ...

  9. Entity Framework Code First （四）Fluent API - 配置属性/类型

    上篇博文说过当我们定义的类不能遵循约定(Conventions)的时候,Code First 提供了两种方式来配置你的类:DataAnnotations 和 Fluent API, 本文将关注 Flu ...

  10. java的debug和release编译方式

    以前没有注意过,其实Java编译成.class 有两种方式 使用javac,默认使用的release方式,而我们经常使用的MyEclipse工具,用的是debug模式. 区别暂时了解如下: relea ...