Change colour of an element when clicked

I cannot figure out how to change the colour of my menu elements when the "center" container or the "right" container is clicked (returning its state once clicked on again). Currently my 3 lines that are within my menu are white, I want to change them to red when these "center" and "right" containers are clicked. My html for my menu and containers are this:

     <div class="menu">
      <div class="line"></div>

<div class= "container" id= "center">
        <h1 style="color:white"><a>LOREM IPSUM<a/></h1>
    </div>

    <div class="container" id= "right">
        <h1 style="color:white"><a>LOREM IPSUM</a></h1>
    </div>

My CSS for my menu elements is this:

.menu .line {
  height: 5px;
  width: 40px;
  background: #fff;
  position: absolute;
  top: 22.5px;
  left: 5px;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
  z-index: 100;
}
.menu .line:after, .menu .line:before {
  content: ' ';
  height: 5px;
  width: 40px;
  background: #fff;
  position: absolute;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}
.menu .line:before {
  top: -10px;
}
.menu .line:after {
  bottom: -10px;
}