Question

我正在开发角度项目，因为我有三个不同的按钮，分别是成功，失败和警告，我默认应用了背景样式和焦点样式。它工作正常，但我的要求是

1）当我单击“失败”按钮时，“成功”按钮的样式将被停用。

2）如果我一次又一次单击失败和警告，则两个按钮的背景都应处于激活模式，而成功按钮的样式将被禁用

3）如果我单击“成功”按钮，则“失败”和“警告”按钮都应像普通按钮一样起作用。

请找到以下HTML和CSS代码。能否请您帮我，如何实现点击按钮的逻辑？谢谢。

--HTML Code--

<div class="buttons">

    <button type="button" class="defaultStyle changeClass" [(ngModel)]="slectedButtonValue" (click)="onButtonFirst()" >Success</button>
<button type="button" class="changeClass" [(ngModel)]="slectedButtonValue" (click)="onButtonSecond()">failures<br><span>Failures</span></button>
<button type="button" class="changeClass" [(ngModel)]="slectedButtonValue" (click)="onButtonThird()">warnings<br><span>Warnings</span></button> 

</div>



----CSS code----

.buttons button{
    width:80px;
    text-align: center;
}


.defaultStyle{
    background-color:rgb(43, 122, 226);
    width:80px;
}

.changeClass:focus{
background-color: rgb(43, 122, 226);
}

如何根据条件激活按钮的背景色

0 个答案: