如何为按钮着色并保持状态？答案

【问题标题】：how to color button and keep state?如何为按钮着色并保持状态？
【发布时间】：2016-12-16 03:18:23
【问题描述】：

我有 3 个按钮，每个按钮显示一个不同的列表。一次只能显示一个列表，我希望按钮在显示列表时被着色....

目前我已经设法使用 css 突出显示按钮：

button:active {
  border: 2px solid green;
}

在我的 css 文件中，但是当我单击页面中的其他位置时，突出显示消失了，我想要一些东西来为按钮着色，只要它的列表出现。

这是我的按钮：

  <button md-button (click)="setListToDisplay(0)" class="md-primary">List1</button>

  <button md-button (click)="setListToDisplay(1)" class="md-primary">List2</button>
</div>

<md-content>

      <div class="list-bg" *ngFor="#item of items>
        <div>id: {hetId(item)}}</div>
        <br>
        <div>name: {{getName(item)}}</div>
      </div>
    </div>

</md-content>

谢谢！

【问题讨论】：

标签： javascript html css angular typescript

【解决方案1】：

为您的按钮添加类绑定。

例如：只要selectedGroupNumber 等于0，[class.yourClass]="selectedGroupNumber == 0" 就会将类yourClass 添加到按钮元素。

【讨论】：

【解决方案2】：

您无法在 CSS 中维护状态。唯一存在的状态是悬停、活动、聚焦和检查。单击按钮时，您需要在按钮上切换一个类。

http://jsbin.com/xudezupasi/edit?html,css,js,console,output

var button = document.getElementById("dog");
button.addEventListener("click", function(){
  button.classList.toggle("showing");
},false)

#dog{
  background:red;
  height:50px;
}

.showing{
  background:teal !important;
}

&lt;div id="dog"&gt;&lt;/div&gt;

您也可以使用复选框 hack，但这意味着更改您的 html。这是一篇关于 hack 的文章，https://css-tricks.com/the-checkbox-hack/

这个想法是您使用伪元素:checked 将状态添加到您的html。它需要您隐藏复选框并使用标签或变得聪明。

【讨论】：