9月23日JavaScript作业----用DIV做下拉列表
例题二、用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做下拉列表的更多相关文章
- 9月23日JavaScript作业----日期时间选择
作业二:日期时间选择 <div style="width:600px; height:100px;"> <select id="year"&g ...
- 9月23日JavaScript作业----子菜单下拉
例题一.子菜单下拉 <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700p ...
- 9月23日JavaScript作业----两个列表之间移动数据
作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
- 5月23日 JavaScript
一.JavaScript简介 1.JavaScript是什么: 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它的用法: 在HTML中位置有三块: (1)head里面 (2)bod ...
- 5月23日 JavaScript练习:累加求和
第一种方法: 第二种方法:
- Week16(12月23日):复习
Part I:提问 =========================== 1.声明强类型视图时,使用关键字( ) A.ViewBag B.model C.Type D.Tit ...
- 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 ...
- [分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 )
[分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...
- 11月23日《奥威Power-BI报表集成到其他系统》腾讯课堂开课啦
听说明天全国各地区都要冷到爆了,要是天气冷到可以放假就好了.想象一下大冷天的一定要在被窝里度过才对嘛,索性明天晚上来个相约吧,相约在被窝里看奥威Power-BI公开课如何? 上周奥威公开 ...
随机推荐
- PagerAdapter 用法
PagerAdapter简介 PagerAdapter是android.support.v4包中的类,它的子类有FragmentPagerAdapter, FragmentStatePagerAdap ...
- windows server2008 r2 下启用 sqlserver 2008的远程连接
首先说明,本文转自互联网. TMD 花了二天,终于找到怎么开启这个远程连接了.....娘的,累死了,写下来,希望能帮助同胞们... 用win server 2008 r2 和sql server 20 ...
- [转]Servlet 3.0 新特性详解
原文地址:http://blog.csdn.net/xiazdong/article/details/7208316 Servlet 3.0 新特性概览 1.Servlet.Filter.Listen ...
- 使用HTML5新特性Mutation Observer实现编辑器的撤销和撤销回退操作
MutationObserver介绍 MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mut ...
- 01python算法--算法和数据结构是什么鬼?
我不想直接拷贝google 上面所有对算法的解释.所以我想怎么说就怎么说了,QAQ 1:什么是程序? 解决问题的范式 2:什么是问题? 程序输入与输出之间的联系 3:什么是算法: 算法就是解决问题的思 ...
- Jquery-获取iframe中的dom对象
父窗口中操作iframe: $(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作父窗 ...
- SVN安装配置和使用教程
注意:location :为安装文件位置,Repositories:为管理的代码仓库的位置,若选中Use secure connection前面的Checkbox,则表示安全连接[https],这里的 ...
- Yii2 Redis的使用
Yii2 redis扩展 下载 将下载的解压,改名为redis,放在vendor\yiisoft\yii2\目录下 包含Connection.php,ActiveRecord.php等文件 修改 ...
- bzoj2653: middle
首先,对于每个询问,我们二分答案 然后对于序列中大于等于中位数的数,我们把它们置为1,小于中位数的数,置为-1 那么如果一个区间和大于等于0,那么就资磁,否则就不滋磁 这个区间和呢,我们可以用主席树维 ...
- bzoj2565: 最长双回文串
manacher之后乱搞 #include <iostream> #include <cstdio> #include <cstring> #include < ...