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

我不知道menu-item是什么，但您可能需要事件prevent the default behavior。像这样的东西应该做的伎俩

$('.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');
});

Answer 2

尝试以下：

$('#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/

我希望它有所帮助。

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

2 个答案: