[jQuery] onclick change class to new class

[Info]

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!