在选定的菜单项asp.net主页上更改背景色

Question

I have a menu in a MasterPage constructed of unordered list. I am trying to use javascript to change selected tab color. It works fine if i have href="#" in the anchor tags, but if I put an actual link to another page then the color tab reverts back to the home page. I change the listitem id to onlink when selected. I have been searching for couple days with dead end answers. Is there a clean solution for this?

How does stackoverflow accomplish this in their menu? [Questions] [Tags] [Users] [Badges] [Unanswered]

Html for menu

  <div id="navbar">
        <ul id="menulist">
            <li><a onclick="SelectedTab(this);" href="Default.aspx" id="onlink">Home</a></li>
            <li><a href="#" id="">View</a></li>
            <li><a onclick="SelectedTab(this);" href="About.aspx" id="">About</a></li>
            <li><a onclick="SelectedTab(this);" href="Contact" id="">Contact</a></li>
        </ul>
  </div>

Javascript

  <script type="text/javascript">
    function SelectedTab(sender) {
        var aElements = sender.parentNode.parentNode.getElementsByTagName("a");
        var aElementsLength = aElements.length;
        var index;
        for (var i = 0; i < aElementsLength; i++) {
            if (aElements[i] == sender)        
            {
                index = i;
                aElements[i].id = "onlink";
            } else {
                aElements[i].id = "";
            }
        }
    }
</script>

Css for the selected tab

...stuff

#navbar ul li a#onlink
{
   background: #FFF;
   color: #465c71;
}
#navbar ul li a#onlink:hover 
{
   background: #FFF;
   color: #465c71;

...more stuff

Answer 1

You need to set the selected link when you actually move to that page. Try something like this.

$(function(){
    var url=document.location.href;
    $("div#navbar ul#menulist li a").each(function(){
            var t=$(this).attr("href");
            if(t && url.indexOf(t)>0){
                $(this).addClass("onlink");
            }
    });
});

please check if the navbar and menulist are the IDs of rendered elements. Otherwise you either need to use 'ClientIdMode="Static"' on div and ul or use '<%= navbar.ClientID%>' to get id. see the working example here: jsfiddle

Also you need to make slight change to your CSS , instead of:

 #navbar ul li a#onlink

please use:

 #navbar ul li a.onlink