uando o usuário clica em uma guia do menu, quero que ele permaneça selecionado com um botão branc

aqui é minha tentativa, mas não está funcionando. se você clicar no botão inicial, ele não permanecerá branco.

html

<ul id="navigation">
    <li><a href="#"><span>HOME</span></a></li>
    <li><a href="/en-us/about.aspx"><span>ABOUT</span></a></li>
    <li><a href="/en-us/contact.aspx"><span>CONTACT</span></a></li>
</ul>

css:

body{
    background-color:orange;
}

#navigation a
{
    background: url("http://i52.tinypic.com/spxfdw.png") no-repeat scroll 0 0 transparent;
    color: #000000;
    height: 43px;
    list-style: none outside none;
    padding-left: 10px;
    text-align: center;
    text-decoration: none;
    width: 116px;
}

#navigation a span
{
    padding-right: 10px;
    padding-top: 15px;
}

#navigation a, #navigation a span
{
    display: block;
    float: left;

}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
    float: none
}
/* End hide */

#navigation a:hover
{

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

#navigation a:hover span
{
    background: url(right-tab-hover.gif) right top no-repeat;
    padding-right: 10px
}

#navigation ul
{
    list-style: none;
    padding: 0;
    margin: 0
}

#navigation li
{
    float: left;
    list-style: none outside none;
    margin: 0;
} 

JS

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

alguma ideia