ボタンをクリックした後にスタイルを保持する方法

Question

4つのボタンがあり、それぞれのボタンは押したときに別のスタイルを持ちますが、反対側をクリックするとボタンのスタイルが失われました。

.bar-serv { 
 
    padding: 12px 20px; 
 
    display: inline-block; 
 
    width: 90px; 
 
    text-align: center; 
 
} 
 

 
.bar-opt1:focus { 
 
    border-bottom: #7ebf10 solid 2px; 
 
} 
 

 
.bar-opt2:focus { 
 
    border-bottom: #1F589A solid 2px; 
 
} 
 

 
.bar-opt3:focus { 
 
    border-bottom: #73afe7 solid 2px; 
 
} 
 

 
.bar-opt4:focus { 
 
    border-bottom: #e73827 solid 2px; 
 
}

<div id="chooseServ" class="block"> 
 
    <div class="container"> 
 
    <p class="p-20" style="display: inline;">options: </p> 
 
    <a onClick="method1" class="bar-serv bar-opt1 p_lr_20">option1</a> 
 
    <a onClick="method1" class="bar-serv bar-opt2 p_lr_20">option2</a> 
 
    <a onClick="method1" class="bar-serv bar-opt3 p_lr_20">option3</a> 
 
    <a onClick="method1" class="bar-serv bar-opt4 p_lr_20">option4</a> 
 
    </div> 
 
</div>

Answer 1

ユーザーがクリックするか、要素をタップしたときにトリガされます:focus CSSの擬似クラスを使用しています。これは通常フォームフィールドで使用されます

ユーザーがマウスのプライマリボタンを押したときにトリガされるCSS疑似クラスを使用してみてください。

Answer 2

CSSで試してみてください！

bar-opt1:hover{ 
    background-color:red; 
    border:1px solid black; 
}