버튼의 색상을 지정하고 상태를 유지하는 방법은 무엇입니까?

Question

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> 

감사 :

이 내 버튼입니다!

Answer 1

버튼에 클래스 바인딩을 추가하십시오.

예를 들어

: selectedGroupNumber이 0 동일 할 때마다 [class.yourClass]="selectedGroupNumber == 0" 버튼 요소에 클래스 yourClass을 추가합니다.

Answer 2

CSS에서 상태를 유지 관리 할 수 ​​없습니다. 존재하는 유일한 상태는 호버, 활성, 집중 및 검사입니다. 클릭 한 클래스를 토글해야합니다.

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>

또한 체크 박스 해킹을 사용할 수 있지만 그것은 당신의 HTML을 변경 수단

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

. 여기에 해킹에 대한 기사가 있습니다. :checked을 사용하면 HTML에 상태를 추가 할 수 있습니다. 확인란을 숨기고 라벨 작업을하거나 영리하게 작업해야합니다.