title: How to make buttons remain 'active' after they're clicked?
body: <p>I'm currently using the following code for my menu items:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;li&gt;
  &lt;a id="About" class="button" href="About Us.cshtml"&gt;About Us&lt;/a&gt;
  &lt;/li&gt;
  &lt;li style="margin-left: 30px;"&gt;
  &lt;a id="Services" class="button" href="Services.cshtml"&gt;Services&lt;/a&gt;
  &lt;/li&gt;
  &lt;li style="margin-left: 30px;"&gt;
  &lt;a id="Contact" class="button" href="Contact Us.cshtml"&gt;Contact Us&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#About {background-image: url(../Buttons/About.png); width: 87px;}
  #Services {background-image: url(../Buttons/Services.png); width: 112px;}
  #Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
  a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
  a.button:hover {background-position: 0 -20px;}
  a.button:active {background-position: 0 -40px;}
  </code></pre>
  
  <p>I need to get the buttons to remain in the 'active' state after they're clicked and the page loads/refreshes etc.</p>
  
  <p>If the solution requires javascript, please bear in mind that I'm a rank amateur so I'll need any explanations in layman's terms (preferably with examples).</p>