jQuery UI tabs replace part of file name on tabsshow

I am using jQuery and Joomla. Sinca I need to use jQuery.noConlict() due to the use of other javascript libraries, I use jQuery instead of $

I have a set of tabs. I am using jQuery UI. I am using the fadein fadeout through opacity toggle, and the rotation (all working fine)

I want to change the file name of the img tag which is a child of the anchor tag in the tabs

tabs has typical structure (i.e. ul > li > a > img....</ul><div><the tab's content></div>)

(please, do not ask or suggest I change the image to be background image. I must keep structure this way)

With the code below, I am trying to add to the file name of the img, but it is not working. When the alert is triggered I continue to read the old file name, and of cou开发者_如何学编程rse, I see the old image

jQuery( "#tabs" ).bind('tabsshow', function(event, ui){

                        var image = jQuery(ui.tab).children();

                        image.attr("src").replace(".png","-active.png");

                        var liContent = image.attr("src");

                        alert(liContent);

                        }

    );

It should be like this:

jQuery( "#tabs" ).bind('tabsshow', function(event, ui){

   var image = jQuery(ui.tab).children();    
   image.attr("src",image.attr("src").replace(".png","-active.png"));    
   var liContent = image.attr("src");    
   alert(liContent);    
 });

Or Like this:

jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
   var image = jQuery(ui.tab).children();    
   var liContent = image.attr("src").replace(".png","-active.png");    
   alert(liContent);    
});