How to Dynamically Highlight the selected menu ?

Hello All,
Am having menu in the list item as follows

<li id="adminproduct" runat="server"><a id="product" runat="server" href="Product.aspx" onclick="select_func">Products</a></li>
	                       <li id="adminusers" runat="server"><a href="Users.aspx" id="users"  runat="server"  onclick="select_func1">Users</a></li> 
	                       <li id="admincart" runat="server"><a href="myorder.aspx" id="myorder" runat="server">my shopping cart</a></li>    
	                       <li id="admincontact" runat="server"><a href="#" id="contact"  runat="server">Contact</a></li>

Css is as follows

#menu li a.selected{ /*selected main tab style 
background-image: url(../images/shade.gif);*/
background-color: #004d6a;
font-size:12px; font-weight:bold; color:#fff;
border-bottom-color: white;
}

I have used the javascript function with the onclick event as follows,

 <script type="text/javascript">
            function select_func()
            {
                alert("Fired. . ");
               document.getElementById("product").className="selected";
                
            }
        </script>

But the Script is not getting Fired !

Am I right,Please Guide me how to do ?