title: How to make specific button to stay active ? CSS, Javascript
body: <p>having a problem, I have a javascript content switcher on a page, but I can't seem to get one thing working - how to make a clicked button stay active after it's clicked?</p>
  
  <p>Here's a code:
  <strong>JS</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function switch1(div) {
  var option=['one','two','three'];
  for(var i=0; i&lt;option.length; i++) {
  if (document.getElementById(option[i])) {
  obj=document.getElementById(option[i]);
  obj.style.display=(option[i]==div)? "block" : "none";
  }
  }
  }
  
  window.onload=function () {switch1('one');}
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#switchables li a {
      color: #262626;
      text-decoration: none;
      display: inline-block;
      padding-top: 14px;
      padding-right: 34px;
      padding-bottom: 10px;
      padding-left: 33px;
      background-image: url(img/catButBcgr.jpg);
      border-right-width: 1px;
      border-left-width: 1px;
      border-right-style: solid;
      border-left-style: none;
      border-right-color: #E1E1E1;
      border-left-color: #FFF;
  }
  #switchables li a:hover {
      background-image: url(img/catButBcgrH.jpg);
  }
  #switchables li a:active {
      background-image: url(img/catButBcgrA.jpg);
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;ul id="switchables"&gt;
     &lt;li&gt;&lt;a class="active" href="javascript:void[0];" onclick="switch1('one');"&gt;OVERVIEW&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="active" href="javascript:void[0];" onclick="switch1('two');"&gt;CATEGORY&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="active" href="javascript:void[0];" onclick="switch1('three');"&gt;CATEGORY&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>