[jQuery] Re: onclick change class to new class

Hi Anton,

$('#gt').click(function() { //<-- # this is wrong, you don't have a gt #id but a gt.class so you have to change #gt in .gt
                 $(this).removeClass("gt");
                 $(this).addClass("gt_active");
         });
this should work:
$('.gt').click(function() {
                $(this).removeClass("gt");
                 $(this).addClass("gt_active");
         });

try it,
regards

Diego

2008/10/30 Anton Babushkin <vegitto.ru@gmail.com>

You should be attaching your click bind to the anchor element not the
list element, since thats whats going to be firing the event.

On Oct 30, 1:18 pm, Info <i...@vglservices.com> wrote:
> 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!