onblur事件:
当用户离开一个字段并且未写入任何数据,该字段改变颜色
html
<form action="#">
email:<input type="text" class="reqd"/>
name:<input type="text"/>
css:
<style type="text/css">
body{
background-color: #FFF;
}
.highlight{
background-color: #FF9;
}
</style>
javascript:
<script type="text/javascript">
window.οnlοad=initForm;
function initForm() {
var allTags=document.getElementsByTagName("*");
for(var i=0;i<allTags.length;i++){
if(allTags[i].className.indexOf("reqd")>-1){
allTags[i].οnblur=field;
}
}
}
function field() {
if(this.value==""){
this.className+=" highlight";
this.focus;
}else{
this.className="reqd";
}
}
</script>
折叠菜单
点击链接展开 再点击折叠
html:
<div>
<a href="menu1.html" class="menuLink">come</a>
<ul class="menu" id="menu1">
<li><a href=""> all</a></li>
<li><a href="">as</a></li>
<li><a href="">love</a></li>
<li><a href="">test</a></li>
</ul>
</div>
<div>
<a href="menu2.html" class="menuLink">Yra</a>
<ul class="menu" id="menu2">
<li><a href=""> all</a></li>
<li><a href="">as</a></li>
<li><a href="">love</a></li>
<li><a href="">test</a></li>
</ul>
</div>
css:
<style type="text/css">
body{
background-color: #FFF;
color: #000;
}
div{
margin-bottom: 10px;
}
ul.menu{
display: none;
list-style-type: none;
margin-top: 5px;
}
a.menuLink{
font-size: 16px;
font-weight: bold;
}
</style>
javascript:
<script type="text/javascript">
window.οnlοad=init;
function init() {
var allLinks=document.getElementsByTagName("a");
for(var i=0;i<allLinks.length;i++){
if(allLinks[i].className.indexOf("menuLink")>-1){
allLinks[i].οnclick=tog;
}
}
}
function tog() {
var start=this.href.lastIndexOf("/")+1;
var stop=this.href.lastIndexOf(".");
var thismenu=this.href.substring(start,stop);
var thism=document.getElementById(thismenu).style;
if(thism.display=="block"){
thism.display="none";
}else{
thism.display="block";
}
return false;
}
</script>
下拉菜单:鼠标移动到链接上就有下拉菜单:
html不变
css
<style type="text/css">
body{
background-color: #FFF;
color: #000;
}
div{
margin-bottom: 10px;
width: 20em;
background-color: #9CF;
float:left;
}
ul.menu{
display: none;
list-style-type: none;
margin:0;
padding: 0;
}
ul.menu li{
font:1em arial,helvtica,sans-serif;
padding-left: 10px;
}
ul.menuLink li a{
text-decoration: none;
color:#006;
}
a.menuLink{
font-size: 1.2em;
font-weight: bold;
}
ul.menu li a:hover{
background-color: #006;
color: #FFF;
padding-right: 10px;
}
</style>
javascript:
<script type="text/javascript">
window.οnlοad=init;
function init() {
var allLinks=document.getElementsByTagName("a");
for(var i=0;i<allLinks.length;i++){
if(allLinks[i].className.indexOf("menuLink")>-1){
allLinks[i].οnmοuseοver=tog;
allLinks[i].οnclick=function () {
return false;
}
}
}
}
function tog() {
var start=this.href.lastIndexOf("/")+1;
var stop=this.href.lastIndexOf(".");
var thismenu=this.href.substring(start,stop);
document.getElementById(thismenu).style.display="block";
<!--父节点包围这个链接的div-->
<!--鼠标离开div时关闭菜单,只要鼠标在菜单的任何位置,就应该打开,将一个class属性分配给当前链接的父元素-->
<!--即包围这个链接的div-->
this.parentNode.className=thismenu;
this.parentNode.οnmοuseοut=function () {
document.getElementById(this.className).style.display="none";
}
this.parentNode.οnmοuseοver=function () {
document.getElementById(this.className).style.display="block";
}
}
</script>