选择按钮后如何在按钮下方放置一条线？答案

【问题标题】：How do I put a line under a button when its selected?选择按钮后如何在按钮下方放置一条线？
【发布时间】：2016-12-05 22:20:16
【问题描述】：

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

这只是向我展示了三个按钮，我会根据点击执行操作。

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

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

谢谢

【问题讨论】：

这条线应该可见多长时间？一次点击的持续时间仅为 0.001 秒左右。
@GünterZöchbauer 在单击新按钮之前它应该是可见的，然后该行应该移动到新单击的按钮

标签： css html angular

【解决方案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>

【讨论】：

也许应该在这里使用轮廓而不是边框以避免跳跃的按钮并使用熟悉的外观:)，只是一个想法......
@GCyrillus 我真的没想到这是理想的解决方案。我只是希望这个答案能激励杰克提供更多关于他到底想要什么的细节。
您的代码没有提供足够的信息。我只是假设有一些 state 属性，但我无法从您提供的信息中知道。我无法看到 setState(x) 在做什么。
setState 只是一种帮助我的 component.ts 决定将哪个列表分配给我的 listToDisplay 属性的方法。
如果setState() 设置了某个状态，您可以使用该状态来决定哪个按钮应该加下划线。如果不是，则需要引入这样的状态。