JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="navigation">
    <li><a href="#"><span>HOME</span></a></li>
    <li><a href="#"><span>ABOUT</span></a></li>
    <li><a href="#"><span>CONTACT</span></a></li>
</ul>

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;
}

JavaScript

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