title: how to display an image in a div that is kept on next page loading using jquery?
body: <p>i got a template displaying an image , something like:</p>
  
  <pre><code>&lt;div id='menu_photo'&gt;
        &lt;div id='menu_photo_container'&gt;
          &lt;img id='click_menu_photo' src='/../../wp-content/uploads/2013/07/Image_Slider1.jpg'/&gt;
         &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>Depending on which click on menu , i'd like to display a different image using jquery , something like</p>
  
  <pre><code>jQuery(function ($) {
  
        $('.menu-item').on({
        'click': function(){      
            $('#click_menu_photo').attr('src','/../../wp-content/uploads/2013/07/IMG_0750-rec22-150x150.jpg');
         });
  });
  </code></pre>
  
  <p>As soon as i click it does change the picture in the code .
  The problem i have is then the page get reloaded and the image is back as defined in the template again (not the one from the last click) .
  How can i solve this ?</p>