どのようにボタンを押して状態を維持するのですか？

Question

私は3つのボタンとそれぞれのボタンが別のリストを提示しています。

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

中に1つだけのリストが一度に提示することができ、私はそれがリスト提示だと、ボタンが着色したい....

現在私が使用してCSSでボタンを強調するために管理しています私の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で状態を維持することはできません。存在するのは、ホバー、アクティブ、フォーカス、チェックのみです。ボタンがクリックされたときにクラスを切り替える必要があります。あなたはまた、チェックボックスのハックを使用することができますが、それはあなたのHTMLを変更することを意味

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>

。ここでは、ハックの記事ですhttps://css-tricks.com/the-checkbox-hack/

擬似要素を使用してHTMLに状態を追加するという考えがあります。それはあなたがチェックボックスを隠し、ラベルを操作したり、巧みになることが必要です。