如何通过点击缩略图显示/隐藏大图像？

如何通过点击缩略图显示/隐藏大图像？

我需要这样的

在这里试试JSFiddle http://jsfiddle.net/jitendravyas/Qhdaz/

是否可以只使用CSS。 如果没有那么jQuery解决方案就可以了。

使用即使它没有在相同或新选项卡中打开任何新页面也是一件好事。

编辑：

我忘了补充一下。 它也应该在iPad上运行

Answer 1

看这个例子：

没有预加载

HTML：

Javascript（jQuery）

 $(function(){ $(".small-images a").click(function(e){ var href = $(this).attr("href"); $("#big-image img").attr("src", href); e.preventDefault(); return false; }); }); 

目前只有1个大图像，当点击A时，A的href被复制为大图像的SRC。

实例： http ： //jsfiddle.net/Qhdaz/1/

如果你不想在没有额外DOM进展的情况下这样做，你可以添加3个大图像，并直接加载它们。 以上解决方案不预装图像，下面的function会。

预加载

HTML：

使用Javascript：

 $(function(){ $("#big-image img:eq(0)").nextAll().hide(); $(".small-images img").click(function(e){ var index = $(this).index(); $("#big-image img").eq(index).show().siblings().hide(); }); }); 

http://jsfiddle.net/Qhdaz/2/