How do I put a line under a button when its select

问题:

I have 3 buttons:

<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>

this just present me three buttons, and im doing actions based on the click.

now I want to indicate which button is currently clicked so I wanted to add underline for the button, how can I do that?

it should be visible untill a new button was clicked and then the line should be moved to the newely clicked button

thanks

回答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>