为按钮提供它已被激活的外观

Question

您好，我正在使用 bootstrap 4，我有这个按钮组，我需要在用户点击它时保持每个按钮处于活动状态。现在，如果我点击一个按钮，它会呈现出它已被激活，但是当点击屏幕上的任何地方时，这种外观消失了……我该如何实现呢？谢谢！

 <div class="btn-group btn-group-sm btn-responsive " role="group" >
                    <button (click)="test('tx1')"  type="button" class="btn btn-secondary btn-responsive"  >Tx1</button>
                    <button (click)="test('tx2')" type="button" class="btn btn-secondary btn-responsive " >Tx2</button>
                    <button (click)="test('tx3')" type="button" class="btn btn-secondary btn-responsive ">Tx3</button>
                    <button (click)="test('tx4')" type="button" class="btn btn-secondary btn-responsive ">Tx4</button>
                    <button (click)="test('rx1')" type="button" class="btn btn-secondary btn-responsive ">Rx1</button>
                    <button (click)="test('rx2')" type="button" class="btn btn-secondary btn-responsive ">Rx2</button>
                    <button (click)="test('obst')" type="button" class="btn btn-secondary btn-responsive ">Obstaculo</button>
                  </div>

Answer 1

您需要切换每个按钮元素的 active CSS class onclick。 .active 或您选择的任何名称都将具有您需要的样式。你使用一些 JS 框架吗？所以我可以粘贴一个示例片段。

在 Angular 中会是

.html

<button (click)="test('tx1')" [class.active]="activeButtonName === 'tx1'"  type="button" class="btn btn-secondary btn-responsive"  >Tx1</button>

<button (click)="test('tx2')" [class.active]="activeButtonName === 'tx2'"  type="button" class="btn btn-secondary btn-responsive"  >Tx2</button>

.scss

 .active {
     // your styles go here
    }

在每个按钮中，您都可以像这样设置 .ts 文件

public activeButtonName: string = ''

test(buttonName: string): void {
 this.activeButtonName = buttonName;
}

为按钮提供它已被激活的外观

Give button the appearance that it has been activated

html

twitter-bootstrap

button

buttongroup