前端开发实现按钮选中后颜色变化

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

Yang-Bo

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

阅读量5.8k

点赞数 1

本文链接：https://blog.csdn.net/qq_42800961/article/details/90676027

版权

html代码：

<div class="layui-btn-group layuiadmin-btn-group">
			<button id= "SupendButton-one" class="layui-btn layui-btn-primary layui-btn-xs" onclick="queryTime(1,this)">日报</button>
			<button id= "SupendButton-two" class="layui-btn layui-btn-primary layui-btn-xs" onclick="queryTime(2,this)">月报</button>
			<button id= "SupendButton-three" class="layui-btn layui-btn-primary layui-btn-xs" onclick="queryTime(3,this)">年报</button>
			<button id= "SupendButton-four" class="layui-btn layui-btn-primary layui-btn-xs" onclick="queryTime(4,this)">全部</button>
</div>

js代码：

function queryTime(i,obj) {
			//清空其它同类按钮选中颜色
	        $('button[id^="SupendButton-"]').css("background-color", "#fff");
	        //点击后变色
	        $(obj).css("background-color", "#01AAED");
	    }