jQuery Forum

Hello All,
I have a CSS list that I use as my navigation. Each LI has a
background image as the base and a a:hover image for roll over. Within
the LI item for the navaigation I have a ahref that is used to fire
off some jquery function. All this works....now I want to change the
LI item to another css class if it clicked. I have tried this:
$('#gt').click(function() {
$(this).removeClass("gt");
$(this).addClass("gt_active");
});
But that doesn't work :-(
Here is a sample of the complete code:
HTML
<div class="order_menu">
<ul>
<li class="gt"><a href="#1" class="cross-link"></a></
li>
<li class="lt"><a href="#2" class="cross-link"></a></
li>
<li class="pt"><a href="#3" class="cross-link"></a></
li>
</ul>
</div>
CSS:
#main_container #left_container .mid_outer .slide_outer .order_menu
li.gt a{float:left; width:235px; height:54px; background:url(../images/
gt.jpg) no-repeat top left;}
#main_container #left_container .mid_outer .slide_outer .order_menu
li.gt a:hover{background:url(../images/gt_over.jpg) no-repeat top
left;}
#main_container #left_container .mid_outer .slide_outer .order_menu
li.gt_active{float:left; width:235px; height:54px; background:url(../
images/gt_over.jpg) no-repeat top left;}
Any help would be great!