javascript - jquery .html 仅在 Chrome 中重新加载页面

Question

我有一个在 div 中重写 html 的函数。就是制作一个图片库，在显示的图片上有翻转效果。仅在 Chrome 中，页面会完全重新加载并将您带回页面顶部。我怎样才能阻止这个？它在 FF 和 IE 中运行良好。

$(document).ready(function(){     
 $(".imagegrid").click(function(e){
  var newIMG = $(this).attr("id");
  $("#show").html("<img id='displaypic' src='Images/Photoshop/"+newIMG+"After1.jpg' onmouseover=\"this.src='Images/Photoshop/"+newIMG+"Before.jpg'\" onmouseout=\"this.src='Images/Photoshop/"+newIMG+"After.jpg'\">");
    })   
});

原始链接如下所示:

<img id="Oakley" class="imagegrid" src="Images/Photoshop/OakleyThumb.jpg" height="150">

我尝试添加 尝试让它强制刷新页面的该部分作为解决方法，但这也不起作用。

这就是我想要的效果: http://www.retouche.com/site/Portfolio.aspx?id=svc102

Answer 1

更改 CSS 而不是图像本身解决了问题。

$(document).ready(function(){    
 $(".imagegrid").click(function(e){
  var newIMG = $(this).attr("id");
  $("#galleryshow").css("background-image", "url(Images/"+newIMG+"after.jpg)");
  $("#galleryshow").hover(function(){
    $("#galleryshow").css("background-image", "url(Images/"+newIMG+"before.jpg)");
  },function(){
    $("#galleryshow").css("background-image", "url(Images/"+newIMG+"after.jpg)");
    });
  })   
});