Question

I have menu constructed by ul li with anchor tags in each. Css is applied to the anchor
and anchor:hover however I want the selected item to show that it is selected be changing the background a different color. anchor:active does not work.

I am trying javascript but not yet successful. Can this be soley done through css? I have looked at so many examples, but none actually worked right.

JAVASCRIPT

 <script type="text/javascript">
      function ChangeColor(obj) {
         var li = document.getElementById(obj.id);
         li.style.background = "#bfcbd6";
      }
 </script>

HTML

 <div id="navigation">
      <ul>
          <li><a onclick="changecolor(this);" href="Default.aspx">Home</a></li>
          <li><a onclick="changecolor(this);" href="View.aspx">View</a></li>
          <li><a onclick="changecolor(this);" href="About.aspx">About</a></li>
      </ul>
  </div>

CSS – Simplified

#navigation ul {
  list-style-type: none;
}

#navigation li 
{
  float: left;
}

#navigation a
{
  background-color: #465c71;
}

#navigation a:hover
{
  background-color: #bfcbd6;
}

Answer 1

you don’t need to get id again for handling element. obj references the actual element.

 <script type="text/javascript">
      function ChangeColor(obj) {
         obj.style.backgroundColor = "#bfcbd6";
      }
 </script>

Edit: And javaScript is case sensitive, so you should check your function names.

Here is a jsFiddle Demo