JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div id="sidebar">
    <ul>
        <li><a href="#" id="1" class="active">1</a></li>
        <li><a href="#" id="2">2</a></li>
        <li><a href="#" id="3">3</a></li>
    </ul>
</div>

CSS

a {
    border:0;
    background:0;
    font-size:30px;
    color:navy;
}

a.active {
    background-color:#ccd9ff;
    border-radius:15px 15px;
    font-size:30px;
    color:Red;
}

a.active:before {
    content: url('http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg');
}

JavaScript

/*IN THE BEGGINING FIRST LINK IS ACTIVE...SO THE PREPEND IMAGE MUST BE HERE*/

/*BUT THEN THE PREPEND IMAGE MUST ME PLACED ON ACTIVE LINK ONLY*/

$(function(){
    var sidebar = $('#sidebar');
    sidebar.delegate('a','click',function(){
        sidebar.find('a').removeClass('active');
        $(this).addClass('active');
    });
});