Question

你好我使用bootstrap 4，我有这个按钮grup，我需要保持每个按钮激活当用户点击它..现在，如果我点击一个按钮，它将给它的外观，它已被激活，但当点击屏幕中的任何地方时，这个外观消失了......我怎么能得到这个？谢谢！

 <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类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;
}

为按钮指定已激活的外观

1 个答案: