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

最新推荐文章于 2024-07-04 20:21:08 发布

原创最新推荐文章于 2024-07-04 20:21:08 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

Html&Css 专栏收录该内容

25 篇文章

订阅专栏

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

需求：

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

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');
})