Question

我想创建一个在单击缩略图时显示主图像的图库。单击缩略图而不是更改网页中的图像时，将用户带到保留图像的文件，并将其显示在右上角。

不知道为什么会这样？我出错的任何建议以及如何解决这个问题？

<img id="veiwer" src="images/motorbike-girl.jpg" />
<div id='thumbs'>
   <a href='images/chicks.jpg' onclick="gallery(this);"><img src='images/chicks-
   thumb.jpg'/></a>
   <a href='images/motorbike-girl.jpg' onclick="gallery(this);"><img 
   src='images/motorbike-girl-thumb.jpg'/></a>                                                
   <a href='images/yamaha-thumb.jpg' onclick="gallery(this);"><img              
   src='images/yamaha.jpg'/></a>    
</div>


         function gallery(change) {

          document.getElementById('viewer').src = change.href;
         }

Answer 1

问题出现的原因是锚标记的默认行为：默认情况下，当您单击链接时，您将转到它指向的页面/文档。因此，在您的javascript中，您需要告诉“不要运行默认行为，只运行我想要做的事情”。它是通过事件的preventDefault()方法完成的。

cfr this fiddle是一个工作示例，我还删除了内联javascript（= onclick属性）。

单击缩略图时，javascript库不显示主图像

1 个答案: