排他思想

最新推荐文章于 2022-10-13 10:58:46 发布

qq_37137999

最新推荐文章于 2022-10-13 10:58:46 发布

阅读量235

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/qq_37137999/article/details/80649592

版权

JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的排他思想——当点击某个按钮时，仅该按钮保持选中状态（背景色变化），其余按钮恢复默认状态。通过简单的HTML结构与内联CSS样式，配合JavaScript代码，实现了这一交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.demo{
				background-color: #FFAC91;
			}
		</style>
		<script>
			window.onload = function(){
				var btns = document.getElementsByTagName("button");
				
				for(var i=0; i<btns.length; i++){
					btns[i].index = i;
					btns[i].onclick = function(){
						for(var j=0; j<btns.length; j++){
							btns[j].className = "";   // 去掉所有
						}
						this.className = "demo";      // 留下自己
					}
					
				}
				
			}
		</script>
	</head>
	<body>
		<button>111</button>
		<button>111</button>
		<button>111</button>
		<button>111</button>
		<button>111</button>
		<button>111</button>
		<button>111</button>
	</body>
</html>

排他思想：去掉所有，留下自己