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的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
 
随机推荐
- Android系列之网络(三)----使用HttpClient发送HTTP请求(分别通过GET和POST方法发送数据)
			
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
 - 用Access作为后台数据库支撑,书写一个用C#写入记录的案例
			
具体的步骤: 1.创建并打开一个OleDbConnection对象 2.创建插入的SQL语句 3.创建一个OleDbCommand对象 4.使用OleDbCommand对象来插入数据 5.关闭OleD ...
 - DOTween文档
			
前言 DOTween现在还处于 alpha,所以还有一些缺失的功能(如路径插件,附加回调和其它的tween选项),这个文档在不久的将来可能会更新. DoTween:0.8.2.00 官方文档:http ...
 - 【C#】【Thread】ManualResetEvent和AutoResetEvent区别
			
ManualResetEvent和AutoResetEvent主要用于线程之间同步问题. 主要使用方法有Set();Reset();WaitOne(); Set():将事件状态设置为终止状态,允许一个 ...
 - REST风格的原则
			
一个好的RESTful API,应该具备以下特征: 这个API应该是对浏览器友好的,能够很好地融入Web,而不是与Web格格不入. 浏览器是最常见和最通用的REST客户端.好的RESTful API应 ...
 - Lenovo GTX960M 配置CUDA
			
文章是出自我的原创,是写在新浪博客里面的:http://blog.sina.com.cn/s/blog_13b7eb5b20102wvxw.html 首先,软件的版本你选择很重要,我们配置了两天才成功 ...
 - JSON与JSONP
			
JSON JSON:一种用于在浏览器和服务器之间交换信息的基于文本的轻量级数据格式.是JS对象的字符串表示.例如:‘{''name":"aa","age&quo ...
 - 即学即会 Java 程序设计基础视频教程(100课整)无水印版
			
课程总共包含100个课时,总授课长达27多个小时,内容覆盖面广,从入门到精通,授课通俗易懂,分析问题独到精辟通过本套视频的学习,学员能够快速的掌握java编程语言,成为java高手. 课程目录:课时1 ...
 - Chrome 消息传递机制
			
Chrome插件开发入门(二)——消息传递机制 Blog | Qiushi Chen 2014-03-31 9538 阅读 Chrome 插件 由于插件的js运行环境有区别,所以消息传递机制是一个重要 ...
 - Linux10.11-10.18)学习笔记(
			
1Y86指令集体系结构 ISA:指令集体系结构,一个处理器支持的指令和指令的字节级编码 程序员可见的状态 Y86程序中的每条指令都会读取或修改处理器状态的某些部分,称为程序员可见状态.其中包括: 8个 ...