我有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>
谢谢!
答案 0 :(得分:0)
将类绑定添加到按钮。
例如:
只要[class.yourClass]="selectedGroupNumber == 0"
等于yourClass
,selectedGroupNumber
就会向按钮元素添加课程0
。
答案 1 :(得分:0)
您无法在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;
}
<div id="dog"></div>
您也可以使用复选框hack,但这意味着更改您的HTML。这是一篇关于黑客的文章,https://css-tricks.com/the-checkbox-hack/
这个想法是你使用伪元素:checked
向你的html添加状态。它要求您隐藏复选框并使用标签或变得聪明。