css - 选中按钮后如何在按钮下放置一行？

Question

我有 3 个按钮:

<div>
  <!-- 1st button -->
  <button md-button
          (click)="setState(0)"
          class="md-primary">Button 1
  </button>

  <!-- 2nd button -->
  <button md-button
          (click)="setState(1)"
          class="md-primary">Button 2
  </button>

  <!-- 3rd button -->
  <button md-button
          (click)="setState(2)"
          class="md-primary">Button 3
  </button>
</div>

这只会显示三个按钮，我会根据点击执行操作。

现在我想指出当前点击了哪个按钮，所以我想为该按钮添加下划线，我该怎么做？

它应该是可见的，直到单击一个新按钮，然后该行应该移动到新单击的按钮

谢谢

Answer 1

<div>
  <!-- 1st button -->
  <button md-button [style.border-bottom]="state === 0 ? 'solid 3px red' : ''"
          (click)="setState(0)"
          class="md-primary">Button 1
  </button>

  <!-- 2nd button -->
  <button md-button [style.border-bottom]="state === 1 ? 'solid 3px red' : ''"
          (click)="setState(1)"
          class="md-primary">Button 2
  </button>

  <!-- 3rd button -->
  <button md-button [style.border-bottom]="state === 2 ? 'solid 3px red' : ''"
          (click)="setState(2)"
          class="md-primary">Button 3
  </button>
</div>