如何颜色按钮和保持状态

how to color button and keep state?

本文关键字：状态 按钮 何颜色 颜色      更新时间：2023-09-26

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

谢谢!

为您的按钮添加类绑定。

例如

:当selectedGroupNumber = 0时，[class.yourClass]="selectedGroupNumber == 0"将在button元素中添加yourClass类

你不能在CSS中维护状态。存在的状态只有悬停、活动、聚焦和检查。您需要在单击按钮时切换按钮上的类。

http://jsbin.com/xudezupasi/edit?html, css, js,控制台输出

var button = document.getElementById("dog");
button.addEventListener("click", function(){
  button.classList.toggle("showing");
},false)
#dog{
  background:red;
  height:50px;
}
.showing{
  background:teal !important;
}
<div id="dog"></div>

你也可以使用复选框hack，但这意味着改变你的html。这里有一篇关于黑客的文章，https://css-tricks.com/the-checkbox-hack/

这个想法是使用伪元素:checked向html添加状态。它要求你隐藏复选框并使用标签，或者变得更聪明。

相关文章：