buttons sprites

HTML

<ul  id="navlist">
	<li class="ico ico1"><a href="#"></a></li>
	<li class="ico ico2"><a href="#"></a></li>
    
</ul>

CSS

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:relative;top:0;}
#navlist li, #navlist a{height:40px;display:inline-block;}

.ico{
  width:96px;
  height:40px;
  background:url(http://s1.postimage.org/rgyboe94v/sprite.png) no-repeat;    
}     

.ico1{background-position:-96px 0px;}
.ico1.active{background-position: 0px 0px;}
.ico2{background-position: -96px -42px;}
.ico2.active{background-position: 0px -42px;}

JavaScript

$('li').click(function(){

  // remove active class for all other list items
  $(this).parents('ul').find('li.active').removeClass('active');

  // add active class on this item
  $(this).addClass('active');
});