zoukankan      html  css  js  c++  java
  • 排他思想

    我们需要给所有按钮添加一个点击事件就需要用到排他思想需要做到点击当前的按钮改变当前按钮的颜色,并去除其他按钮的背景颜色,用来提升页面效果

    1给五个按钮都添加一个点击事件
    2获取所有的按钮元素
    3需要点击事件清除所有的按钮的背景颜色
    4然后把当前按钮的背景颜色改变

    源代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <button>按钮</button>
            <button>按钮</button>
            <button>按钮</button>
            <button>按钮</button>
            <button>按钮</button>
            <script type="text/javascript">
    //            1给五个按钮都添加一个点击事件
    //            2获取所有的按钮元素
    //            3需要点击事件清除所有的按钮的背景颜色    
    //            4然后把当前按钮的背景颜色改变
                
                
                var btn = document.getElementsByTagName("button")
                for(var i = 0; i < btn.length; i++){
                    
                    btn[i].onclick = function(){
                    for(var i = 0; i<btn.length; i++){
                        btn[i].style.backgroundColor = "";
                        console.log(1)
                    }
                    this.style.backgroundColor = "pink";
                    
                }
                    
                    }
            </script>
        </body>
    </html>

    页面效果:

  • 相关阅读:
    融云使用
    cocoaPods使用
    电脑硬件
    拖图UI和纯代码UI
    7.2内存管理-ARC
    7内存管理-MRC
    数据刷新
    5.1音频播放
    2.6核心动画
    Git常用操作
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/12024616.html
Copyright © 2011-2022 走看看