我正在为我的网站制作一个简单的图库。
演示： http://jsfiddle.net/fdr6y6y7/
当您点击其下方的缩略图时，我的大图像会发生变化。
但是，我有一个问题。每个＆＃39;大＆＃39;图像在新窗口中有自己的链接，但是您可以看到原始主图像链接永远不会改变。
例如，如果我单击第二个缩略图图像，largeimg div内的超链接应该真正更改为http://placehold.it/250x250。
我可以使用jQuery来执行此操作吗？
$('#thumb_scroll a').click(function(event){
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largelink').attr("href", $(this).attr("rel"));
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<a href="http://placehold.it/300x300" target="_blank" class="main"><img src="http://placehold.it/200x200" /></a>
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<a href="http://placehold.it/300x300" class="thumb"><img src="http://placehold.it/100x100" /></a>
</li>
<li>
<a href="http://placehold.it/250x250" class="thumb"><img src="http://placehold.it/100x100" /></a>
</li>
</ul>
</div>
</div>
</div>
答案 0 :(得分：0)
感谢Anon SO用户：http://jsfiddle.net/fdr6y6y7/1/
$('#thumb_scroll a').click(function(event) {
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largeimg a').attr("href", $(this).attr("href"));
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<a href="http://placehold.it/300x300" target="_blank" class="main">
<img src="http://placehold.it/200x200" />
</a>
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<a href="http://placehold.it/300x300" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
<li>
<a href="http://placehold.it/250x250" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
</ul>
</div>
</div>
</div>