当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS绑定事件跟随切换代码实例（2）

JS绑定事件跟随切换代码实例（2）

2019年01月16日  | 移动技术网IT编程  | 我要评论

实现效果：列如：当前有五个元素，当点击其中一个元素的时候只改变当前的样式，其他元素恢复之前的样式；

总结了三种实现的方法：加深自己的理解，有错误望指正！万分感谢！

代码：给事件加属性标记，结合数组实现

<!doctype html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style type="text/css">  
        *{padding: 0;margin: 0;}  
        .box{  
            width: 300px;  
            height: 30px;  
            margin:50px auto;  
        }  
        span{  
            display:inline-block;  
            width: 50px;height: 30px;  
            background-color: #f0c;  
            color:#fff;  
            text-align: center;  
            line-height: 30px;  
        }  
        </style>  
    </head>  
    <body>  
    <!--实现效果：点击某一个元素的时候让其改变样式，其他的恢复之前的样式-->  
  
        <p class="box">  
           <span>内容1</span>  
           <span>内容2</span>  
           <span>内容3</span>  
           <span>内容4</span>  
           <span>内容5</span>  
        </p>  
        <script type="text/javascript">   
            /*  
             * 给每一个元素添加一个属性index.记下当前是第几个元素  
             * 结合数组加上标志位，  
             * 如果点击了就将对应的flag数组的值变为1  
             * 此刻点击的的时候，1有可能是之前点击过的，如果是之前点击的则j!=this.index  
             *                   2如果是此刻点击的，则j==this.index  
              
             */  
            var spans=document.getelementsbytagname('span');  
            var flag=[0,0,0,0,0];  
            for(var i=0;i<spans.length;i++){  
                spans[i].index=i;  
                spans[i].onclick=function(){  
                      
                    flag[this.index]=1;  
                    for(var j=0;j<flag.length;j++){  
                        //判断是否点击过，并且是不是现在点击的这个元素  
                        if(j==this.index && flag[j]==1){  
                            spans[j].style.backgroundcolor='#909'  
                        }else if(flag[j]==1&&j!=this.index){  
                            //之前已经点击过，但是不是现在点击的元素  
                            spans[j].style.backgroundcolor='#f0c'  
                        }  
                    }  
                }             
            }  
  
        </script>  
    </body>  
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网