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>
