jquery - 如何在使用 jquery 的下一页加载时保留的 div 中显示图像？

Question

我有一个显示图像的模板，例如：

<div id='menu_photo'>
      <div id='menu_photo_container'>
        <img id='click_menu_photo' src='/../../wp-content/uploads/2013/07/Image_Slider1.jpg'/>
       </div>
     </div>

根据菜单上的哪个点击，我想使用 jquery 显示不同的图像，比如

jQuery(function ($) {

      $('.menu-item').on({
      'click': function(){      
          $('#click_menu_photo').attr('src','/../../wp-content/uploads/2013/07/IMG_0750-rec22-150x150.jpg');
       });
});

我一点击它就改变了代码中的图片。我遇到的问题是页面被重新加载并且图像再次按照模板中的定义返回（不是最后一次单击的图像）。我该如何解决这个问题？

Answer 1

尝试以下：

$('#click_menu_photo').on("click",function(e){
  e.preventDefault();
  $(this).attr('src','http://www.zwani.com/graphics/hello/images/10.gif');  
});

在这里工作小提琴：http: //jsfiddle.net/qQhHx/

我希望它有所帮助。

Answer 2

我不知道是什么menu-item，但可能您需要阻止事件的默认行为。像这样的东西应该可以解决问题

$('.menu-item').on({
'click': function(e){      
    e.preventDefault(); // prevent element default behavior on click
    $('#click_menu_photo').attr('src','/../../wp-content/uploads/2013/07/IMG_0750-rec22-150x150.jpg');
});