how to add a class when an html element is selected

Question

My application has several buttons (say b1,b2,b3) which I am using as navigation menu items (alternate to using <a>). I want to change the color of the button when it is clicked/selected. When a particular button is clicked (say b1), its color should change to say red and all b2,b3 should have color grey. When b2 is selected, it should be red and b1 should switch back to grey. Is there a way I can do so using css and pseudo elements (something similar to :hover)?

Answer 1

A good strategy is to have a class isClicked which have the styles of the clicked element, and toggle everytime the element is clicked,say:

I use jquery to show the logic behind it :D

$('div').click(function(){  
  $('div.isClicked').toggleClass('isClicked')
  $(this).toggleClass('isClicked')
})

div {
  width: 100px;
  margin:10px auto;
  cursor: pointer;
  text-align:center;
  
  background-color:grey;
}

div.isClicked {
  background-color:red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>A</div>
<div>B</div>
<div>C</div>