Li Menu Needs Class Of "selected"

when the user clicks on a menu tab i want it to remain selected with it a white button. here is my attempt but its not working. if you click the home button it doesnt remain white

Solution 1:

I see several modifications here.

Firstly, when you apply selected class, you are applying to all li items, which is not true. you only want to apply the class to clicked list item.

secondly, when you click another list item, you want to remove the selected class.

so the code modified would be:

$('#navigation li').click(function() {
    $('#navigation li').removeClass('selected');
    $(this).addClass('selected');
});

Most importantly, you do not have a selected class. I put a temporary selected class definition like so:

.selected{
border: 1px solid #888;
background-color: #white;

}

You can see a working example here: on JsFiddle

additionally, your a element has a gray background. so you might want to apply selected white background class to your a element also.. something like:

$('a', this).addClass('selected'); //apply to  anchor element also

and when you remove the class, follow the same deal.

So you want to persist the button states across different Pages. Javascript is only valid as long as the page is open. As soon as the user goes to the new page, all javascript will be reset. To overcome this you can do one of these two things:

1) If you are using a master page for menu, add runat="server" attribute to your list items, and from code behind, add selected class to appropriate list item from your child page (may be you could have a public function in your Master page)

//Master pagepublicSetHomeMenu()
    {
        liHome.Attributes.Add("class","selected");
    }

    //in Child page
    Master.SetHomeMenu(); 

2) If you want to do it in javascript, you need to read your url, parse it, then add selected class to appropriate li

//put this javascript in your head section or even at the bottom, just before closing// body tag </body>

    $(document).ready(function () {
        if(window.location.href.indexOf("home"))
        {
             $("#navigation li#home").addClass("selected");
        }
        elseif(window.location.href.indexOf("about"))
        {
             $("#navigation li#about").addClass("selected");
        }
        elseif(window.location.href.indexOf("contact"))
        {
             $("#navigation li#contact").addClass("selected");
        } 

    });

But for this to work, you need to add id attributes to your list items like so:

<ulid="navigation"><liid="home"><ahref="#"><span>HOME</span></a></li><liid="about"><ahref="/en-us/about.aspx"><span>ABOUT</span></a></li><liid="contact"><ahref="/en-us/contact.aspx"><span>CONTACT</span></a></li></ul>

For use the last solution you need to change the if statement to this example:

if(window.location.href.indexOf("home") > -1)

Solution 2:

As others stated you dont have a .selected class also your js will set all li elements to selected when one is clicked you may want to change it to this on the second line

$('#navigation  li').click(function() {
   $(this).addClass('selected');
});

Solution 3:

This'd do it. You forgot to set the selected class css

http://fiddle.jshell.net/54uDQ/

The important part is this css

#navigationa:hover, #navigationa.selected
{

    background: url('http://i51.tinypic.com/2iih9c9.png') no-repeat scroll 00 transparent;
    color: #000000;
    height: 43px;
    list-style: none outside none;
    padding-left: 10px;
    text-decoration: none;
    width: 116px;
    text-align:center
}

Solution 4:

#navigationli.a.seletecteda.seletected 
{
    background: white; // or background Image or whatever it is your doing to make this      white.
}

Solution 5:

You haven't even set a class for 'selected' in your CSS.

Add this and it should work.

#navigationli.selected {
   [CSS to make white background here.]
}