javascript(三onblur事件 下拉菜单)

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>