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>

选中时如何在按钮下面添加一行？

1 个答案: