点击更新超链接

Question

我正在为我的网站设计一个简单的图库。

演示：http://jsfiddle.net/fdr6y6y7/

我当你点击它下方的缩略图，改变大的图像。

但是，我有一个问题。每个“大”图像在新窗口中都有自己的链接，但您可以看到原始主图像链接始终不会更改。

例如，如果我单击第二个缩略图图像，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>&nbsp;</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>

Answer 1

得益于匿名用户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>&nbsp;</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>