如何变换颜色_html/css_WEB-ITnose

这里有3个

<span>a</span><span>b</span><span>c</span>

点击一下文字变成红色，再点击变成黑色
还有一点就是点击第一个变红色 然后点第二个， 第三个还是红色 然后点击随便一个又变回黑色

回复讨论(解决方案)

看看这个是不是你要的结果：

var div = document.getElementById('div');var span = div.getElementsByTagName('span');for(var i = 0; i < span.length; i++){    span[i].onclick = function(){        if(this.className.length){            this.className = '';        } else {            this.className = 'red';        }    }}

完整代码：

            
    <span>a</span><span>b</span><span>c</span>
<script>    (function(){        var div = document.getElementById('div');        var span = div.getElementsByTagName('span');        for(var i = 0; i < span.length; i++){            span[i].onclick = function(){                if(this.className.length){                    this.className = '';                } else {                    this.className = 'red';                }            }        }    }());</script>

看看这个是不是你要的结果：

var div = document.getElementById('div');var span = div.getElementsByTagName('span');for(var i = 0; i < span.length; i++){    span[i].onclick = function(){        if(this.className.length){            this.className = '';        } else {            this.className = 'red';        }    }}

完整代码：

            
    <span>a</span><span>b</span><span>c</span>
<script>    (function(){        var div = document.getElementById('div');        var span = div.getElementsByTagName('span');        for(var i = 0; i < span.length; i++){            span[i].onclick = function(){                if(this.className.length){                    this.className = '';                } else {                    this.className = 'red';                }            }        }    }());</script>

是这个效果     感谢大神