<div id="changeColor">
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com">新浪网</a>
<a href="http://www.baidu.com">搜狗网</a>这是html代码

解决方案 »

  1.   

    function changeBackgroundColor() {
        var changeColor = document.getElementById("changeColor");
        var changes = changeColor.getElementsByTagName("a");
        for (var i = 0; i < changes.length; i++) {
            var change = changes[i];
            change.onclick = (function(change){
             return function () {
                var changeColor = document.getElementById("changeColor");
                var changes = changeColor.getElementsByTagName("a");
                for (var i = 0; i < changes.length; i++) {
                    var change = changes[i];
                    if (this == change) {
                        change.style.background = "red";
                    }
                    else {
                        change.style.background = "white";
                    }
                }
                return false;
            }}(change));
            
        }
    }
      

  2.   

    function changeBackgroundColor() { 
        var changeColor = document.getElementById("changeColor"); 
        var changes = changeColor.getElementsByTagName("a"); 
        for (var i = 0; i < changes.length; i++) { 
            var change = changes[i]; 
            change.onclick = function () { 
                var changeColor = document.getElementById("changeColor"); 
                var changes = changeColor.getElementsByTagName("a"); 
                for (var i = 0; i < changes.length; i++) { 
                    var change = changes[i];
                    //我们在这里加入一个alert形成一个阻塞,使得每一步的变化都能呈现出来
                    alert('观察点击对象的背景颜色变化');
                    /*
                        先理解下面条件中的this和change分别代表什么
                        1:this --> 外层定义的change.onclick中的change,即当前[点击对象]
                        2:change -->上面定义的var change = changes[i]中的change,即[比对对象]
                        
                    */ 
                    if (this == change) { //判断当前的[比对对象]与[点击对象]是否一致
                        this.style.background = "red"; //如果一致:那使用this或change是没有分别的,所以这里用this没有问题
                    } else {
                        /*
                            这里的前提时,change对象与this并不一致
                            如果下面还使用this,则表示你在改变当前[点击对象]的背景颜色
                            
                            就拿你点击第一个为例吧,比对流程就变成了
                            点击对象为:百度网
                            比对的对象分别为:百度网,新浪网,搜狗网
                            
                            条件成立时,执行上面的语句:[点击对象]背景颜色变为红色
                            点击对象[百度网]==比对对象[百度网]
                            
                            条件不成立时,执行下面的语句:[点击对象]背景颜色变为白色
                            点击对象[百度网]!=比对对象[新浪网]
                            点击对象[百度网]!=比对对象[搜狗网]
                            
                            从上面就可以看出,对[点击对象]的操作将受后一个[比对对象]的影响
                            
                            综上:除非当前[点击对象]是[比对对象]集合中的最后一个元素,否则它的背景颜色将永远是白色
                            
                            如果将下面的this改为change[比对对象],则一切就正常了
                            
                            条件不成立时,执行下面的语句:[比对对象]背景颜色变为白色
                            点击对象[百度网]!=比对对象[新浪网]
                            点击对象[百度网]!=比对对象[搜狗网]
                            
                        */ 
                        this.style.background = "white";//错误
                        //change.style.background = "white";//正确 
                    } 
                } 
                return false; 
            } 
              
        } 
    }
      

  3.   

    以你的示例,使用call()方法来改变函数内容的this,有点绕,瞅瞅再说.仅供参考:
    <div id="changeColor"> 
        <a href="http://www.baidu.com">百度网</a> 
        <a href="http://www.sina.com.cn">新浪网</a> 
        <a href="http://www.sogou.com">搜狗网</a>
    </div>
    <script type="text/javascript">
    /*
        先创建一个自执行的匿名函数
        流程为:
        1:初次执行此函数时,其内部的this-->window,因为this!==window条件不成立,所以,将对每个a标签定义onclick事件
        2:当每个a标签被分别点击时,再执行此函数,因为其内部的this-->被点击的对象,因为this!==window条件成立,此时将设置对应的背景颜色
    */
    (function(){
        var _href   =   document.getElementById("changeColor").getElementsByTagName("a"),//获取div[id='changeColor']下a标签集合
            _self   =   arguments.callee,//获取匿名函数本身
            i       =   0,
            j       =   _href.length;
        for (;i<j;i++) {
            /*
                初始化执行时:this-->window
                当点击对象时,onclick事件触发:this-->点击对象[下面有说明]
                
                所以,可以通过判断this的值来确定到底是要初始化事件,还是执行事件内容
            */
            if(this !== window){
                //这里的this-->被点击的对象,所以根据this===_href[i]的判断结果对_href[i]标签的背景颜色进行相对应的设置
                _href[i].style.background = this===_href[i] ? "red" : "white";
            }else{
                //这里的this-->window
                _href[i].onclick = function () {
                     /*
                        这里的 this-->_href[i][被点击对象]
                        
                        使用call方法将函数内部的this指向_href[i]
                        所以,当点击对象时,再执行匿名函数,this-->_href[i]
                     */
                     _self.call(this);
                     return !1;
                }
            }
        };
    })();
    </script>
      

  4.   

    谢谢,明白了,加上那个alert就明白了。