决策报表按钮控件的样式问题

我在决策报表中添加了3个按钮，用于控制tab块3个页签的切换。（这部分已通过对按钮控件添加JS点击事件实现）

按钮的样式我的需求是选中的按钮其背景颜色为灰色，没选中的按钮其背景颜色跟报表底色相同，为蓝色。选择另一个按钮时，原被选中的按钮从灰色恢复为蓝色。

我在body添加了以下初始化的JS脚本

setTimeout(function(){	
//初始化按钮的颜色（第一个按钮为灰色，第二第三个按钮为蓝色）
$("div[widgetname='BUTTON0'").find("div").css({'background-color':'#443f46'});
$("div[widgetname='BUTTON1'").find("div").css({'background-color':'#042045'});
$("div[widgetname='BUTTON2'").find("div").css({'background-color':'#042045'});
//设置点击按钮后按钮背景颜色的变化
$("[id^=fr-btn-BUTTON]").click(function(){
	$("[id^=fr-btn-BUTTON]").css("background-color","#042045");
	$(this).css("background-color","#443f46")
	.stopPropagation();
})
},500)

得到的效果如下图：

1、打开报表后

2、点击第二个按钮

3、点击第三个按钮

请问为什么点击第二第三个按钮时，中间文字部分仍然显示初始化的蓝色背景，第一个按钮的文字部分仍然显示初始化的灰色背景？

请问我的JS代码需要如何调整？

JS小白，语句都是在各个问答中找到的，请教一下各位，谢谢！

Summio 发布于 2020-9-2 18:54

1min目标场景问卷

立即参与

回答问题关注问题

悬赏：4 F币 + 添加悬赏

提示：增加悬赏、完善问题、追问等操作，可使您的问题被置顶，并向所有关注者发送通知

共2回答

最佳回答

jongwangLv6中级互助
发布于2020-9-2 19:30

试下这个看看

setTimeout(function(){ 
//初始化按钮的颜色（第一个按钮为灰色，第二第三个按钮为蓝色）
$("[id^=fr-btn-BUTTON0]").css({'background-color':'#443f46'});
$("[id^=fr-btn-BUTTON1]").css({'background-color':'#042045'});
$("[id^=fr-btn-BUTTON2]").css({'background-color':'#042045'});
//设置点击按钮后按钮背景颜色的变化
$("[id^=fr-btn-BUTTON]").click(function(e){
    $("[id^=fr-btn-BUTTON]").css("background-color","#042045");
    $(this).css("background-color","#443f46");
    e.stopPropagation();
})
},500)