I can't figure out how to make my image links change background-position onClick on ACTIVE. Nothing works:

    .active {
    background-position-y: -96px 0px;
    }

    <script type="text/javascript">

    $(document).ready(function() {

//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn();
    return false;
});

    });
    </script>


    <ul class="tabs">
<li><a class="a1" href="#tab1"></a></li>
<li><a class="a22" href="#tab22"></a></li>
<li><a class="a23" href="#tab23"></a></li>
<li><a class="a24" href="#tab24"></a></li>
<li><a class="a25" href="#tab25"></a></li>
<li><a class="a26" href="#tab26"></a></li>
</ul>