用简单的“排他思想”实现简单的标签点击事件

最新推荐文章于 2024-04-03 12:49:30 发布

原创最新推荐文章于 2024-04-03 12:49:30 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了一种使用简单的排他思想来实现按钮点击效果的方法。通过先清除所有按钮的样式，然后仅对被点击的按钮应用样式，从而突出当前选中的按钮，这是一种实用的前端开发技巧。

1用简单的排他思想
先去掉所有的样式，再给要点击的对象添加样式

 <script>
        var btn = document.querySelectorAll('button');
        //btn得到的是伪数组，里面的每一个元素 btn[i];
            for(var i = 0;i < btn.length;i++){
                btn[i].onclick = function(){
                    //我们先去掉所有的按钮背景
                    for (var i = 0;i<btn.length;i++){
                        btn[i].style.backgroundColor = '';
                    }
                    //然后才让当前的背景元素变成pink 留下我自己
                    this.style.backgroundColor = 'pink';
            }
            //首先先排除其他人，然后才设置自己的样式，这种排除其他人的思想我们称为排他思想。
        }
    </script>