I have crated tab link menu in ""Magento header""...when click on link color will cha

[vijay2591]

I have crated tab link menu in ""Magento header""...when click on link color will change and after click on another link color change and previous link color back to original...I have created javascript and css please look ..this code work fine when we are not providing href link Thanks in Advance


HTML code::

<ul id="navigation"> <li><a href="http://bytes.com/submit/g/#"><span>HOME</span></a></li> <li><a href="http://bytes.com/submit/g/#"><span>ABOUT</span></a></li> <li><a href="http://bytes.com/submit/g/#"><span>CONTACT</span></a></li> </ul>

Javascript code::

<script>

$(function() {
    $('#navigation li').click(function() {
            $('#navigation li').removeClass('selected');
            $(this).addClass('selected');
            //$('a', this).addClass('selected');
        
    });
});
</script>


css code::

<style type="text/css">
#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;
} 

.selected{
    border: 1px solid #888;
    background-color: #white;
    background-image:none;
}
</style>