title: How to keep :active css style after clicking an element
body: <p>I use anchor as my site navigation. </p>
  
  <pre><code>&lt;div id='nav'&gt;
  &lt;a href='#abouts'&gt;
  &lt;div class='navitem about'&gt;
  about
  &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href='#workss'&gt;
  &lt;div class='navitem works'&gt;
  works
  &lt;/div&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>#nav {
  margin-left: 50px;
  margin-top: 50px;
  text-transform: uppercase;
  }
  .navitem {
  background: #333;
  color: white;
  width: 230px;
  height: 50px;
  font-size: 25px;
  line-height: 50px;
  padding-left: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin-top: 10px;
  }
  .about:hover {
  background: #cc00ff;
  }
  .about:active {
  background: #ff00ff;
  color: #000;
  width: 250px;
  }
  .works:hover {
  background: #0066FF;
  }
  .works:active {
  background: #0099cc;
  color: #000;
  width: 250px;
  }
  </code></pre>
  
  <p>I'm wondering how to keep the div element style keep in the :active state once after the click until I  hit another nav bar item, so how to do it?</p>