按钮组实现切换时背景变化

一名写前端的GISer

于 2024-05-06 17:20:15 发布

阅读量170

点赞数 1

分类专栏： Html&Css 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/wangchaohpu/article/details/138501665

版权

Html&Css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript在按钮组中实现点击切换时选中按钮背景变色的效果，通过CSS设置样式，HTML定义结构，JS处理事件来完成这一功能。

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

需求：

按钮组之间切换时，选中的按钮背景变色，其他按钮显示原来的颜色

css代码：

.btnClass{
	width: 120px;
	border: 1px solid #eeeeee;
	color: black;
	background-color: white;

}
.btnChoosedClass{
	color: white;
	background-color: #1E9FFF;
}

html代码

<button class="layui-btn btnClass btnChoosedClass" >全部报警</button>
<button class="layui-btn btnClass" >已认定线索</button>
<button class="layui-btn btnClass" >废弃线索</button>
<button class="layui-btn btnClass" >未查看线索</button>

js代码

$(".btnClass").unbind('click').bind('click',function(evt){
	var btnClassArr = document.getElementsByClassName('btnClass');
	for(var i=0;i<btnClassArr.length;i++){
		$(btnClassArr[i]).removeClass('btnChoosedClass');
	}
	$(evt.currentTarget).addClass('btnChoosedClass');
})