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>

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/15407.html

javaScript基础练习题-下拉框制作详解编程语言

相关推荐

发表回复