javaScript基础练习题-下拉框制作
1.基础回顾
如何让一个段javascript在文档加载后执行,(因为自己忘了,所以顺便复习一下)
window.onload = function(){};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
ul{ list-style:none;}
ul li{ line-height:40px; text-align:center; position:relative; float:left;}
a{ text-decoration:none; color:#000; display:block; width:90px;}
a:hover{ color:#FFF; background-color:#666;}
ul li ul li{ float:none;margin-top:2px; background-color:#eee; }
ul li ul{width:90px; position:absolute; left: 0px;top: 40px; display: none}
/** ?*/
/**ul li:hover ul{display: block}*/
</style>
<script type="text/javascript" >
window.onload = function(){
alert("load ok");
}
function optionShow(li) {
var submenu = li.getElementsByTagName("ul")[0];
submenu.style.display = "block";
}
function optionHide(li) {
var submenu = li.getElementsByTagName("ul")[0];
submenu.style.display = "none";
} </script>
</head> <body>
<div id="menu">
<ul>
<li id="sy"><a href="#">首页</a></li>
<li id="kcdt"><a href="#">课程大厅</a> <!-- ?-->
<ul>
<li><a href="#">JavScript</a></li>
<li><a href="#">JQuery</a></li>
</ul>
</li>
<li onmouseover="optionShow(this);" onmouseout="optionHide(this);"><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
javaScript基础练习题-下拉框制作的更多相关文章
- javaScript基础练习题-下拉框制作(JQuery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javaScript基础练习题-下拉框制作(CSS)
http://www.imooc.com/video/155 慕课网的视频,直接上代码 <!DOCTYPE hmtl> <html> <head> <meta ...
- javaScript基础练习题-下拉框制作(神奇的代码)
http://www.oschina.net/code/snippet_12_46548#66319 http://www.codeproject.com/Tips/890021/Advanced-C ...
- JavaScript向select下拉框中加入和删除元素
JavaScript向select下拉框中加入和删除元素 1.说明 a 利用append()方法向下拉框中加入元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
- JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...
- JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- Javascript获取select下拉框选中的的值
现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test" name=" ...
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
随机推荐
- JavaWeb学习----JSTL标签库
一.JSTL简介: JSTL全名为JavaServer Pages Standard Tag Library,中文名称为JSP标准标签函数库,目前最新的版本为1.2.JSTL是由JCP(Java Co ...
- FlashInspector 【Firefox浏览器插件,flash分析工具】
Inspect flash(swf)'s DisplayObject with mouse. Overview the swf's DisplayObject list. Set the inspec ...
- C# WinForm 中Console 重定向输出到ListBox控件中显示
{ VoidAction action = { lstBox.Items. ...
- 06Spring_使用注解配置bean对象
Spring注解开发需要jar包 和 xml开发 一样的 ! 第一步: 新建项目, 导入jar包(就是前一篇文章里面的那几个核心jar包) 第二步: 在需要spring创建对象类上面 添加@Compo ...
- 【转】【C#】【Thread】Mutex 互斥锁
Mutex:互斥(体) 又称同步基元. 当创建一个应用程序类时,将同时创建一个系统范围内的命名的Mutex对象.这个互斥元在整个操作系统中都是可见的.当已经存在一个同名的互斥元时,构造函数将会输出一个 ...
- C语言 数组类型与数组指针类型
//数组类型与数组指针类型 #include<stdio.h> #include<stdlib.h> #include<string.h> void main(){ ...
- C#基础系列:实现自己的ORM(反射以及Attribute在ORM中的应用)
反射以及Attribute在ORM中的应用 一. 反射什么是反射?简单点吧,反射就是在运行时动态获取对象信息的方法,比如运行时知道对象有哪些属性,方法,委托等等等等.反射有什么用呢?反射不但让你在运行 ...
- INADDR_ANY的确切含义
INADDR_ANY就是inet_addr("0.0.0.0") 首先,需要明确的是当服务器的监听地址是INADDR_ANY时设置的是服务器的IP地址. 其次,当服务器的监听地址是 ...
- JS函数调用的方法
JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式 1.方法调用模式:先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来 ...
- Android EventBus源码解析 带你深入理解EventBus
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40920453,本文出自:[张鸿洋的博客] 上一篇带大家初步了解了EventBus ...