排他思想

最新推荐文章于 2022-12-03 22:00:00 发布

贪吃ღ大魔王

最新推荐文章于 2022-12-03 22:00:00 发布

阅读量161

点赞数 1

分类专栏：小结文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44070254/article/details/115771794

版权

小结专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript实现一种排他思想，即当点击一个按钮时，所有其他按钮的背景颜色清除，而被点击的按钮背景变为粉红色。通过遍历和事件监听，实现了这个交互效果，适用于前端开发中的用户交互设计。

摘要由CSDN通过智能技术生成

排他思想

<div>
			<button>按钮1</button>
			<button>按钮2</button>
			<button>按钮3</button>
			<button>按钮4</button>
			<button>按钮5</button>
		</div>
		<script type="text/javascript">
			var buts = document.getElementsByTagName('button');
			for(var i = 0; i < buts.length; i++) {   /*给每个按钮添加点击时间*/
				buts[i].onclick = function() {
					for (var j = 0;j < buts.length;j++) {    /*给所有按钮背景颜色清除*/
						buts[j].style.backgroundColor = '';
					}
					this.style.backgroundColor = 'pink'; /*注意这里要用this  当前点击的按钮变色*/    
				}
			}
		</script>

贪吃ღ大魔王

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
排他思想

排他思想<div> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> </div> <script type="text/javascript"> v
复制链接

扫一扫