Question

我的网站上有一个图片库，使用的缩略图在点击时会在缩略图线上方放大。我有自动刷新问题;每次单击其中一个缩略图时，页面都会刷新，然后将其恢复为主图像＆＃34;。

我不是（并且基于我认为所有这些都可以通过简单的CSS和HTML来完成）使用任何想要编写此代码的东西，尽管我知道HTML最好是业余爱好者。

这是代码的示例。如果您需要查看其中的一部分，请告诉我。

<div id="rightcol"> 

<img name="ImageOnly. src='#' /><img src="#" />
</div>


<div id="leftcol"> <div>

<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>

编辑：不知何故，我似乎通过更改

解决了这个问题

 <a href="" onclick="ImageOnly.src='#'">

到

 <a href="#" onclick="ImageOnly.src='#'">

不确定为什么会这样，但是会喜欢解释......？

Answer 1

为什么不使用一些简单的ajax / javascript .innerHTML？而不是试图停止单击具有#的超链接时发生的自动刷新。这样您就可以同步更新rightcol。

HTML 的

<div id="rightcol"> 
<img name="ImageOnly.src" src='#' />
</div>

<div id="leftcol">
<a href="#" onclick="javascript:ajaxMove('ImageOnly.src')"><img src="#" /></a>
</div>

AJAX脚本

  function ajaxMove(src)
  {
  var image = '<img src="'+src+'" alt="my transferred image" />';
  document.getElementById('rightcol').innerHTML = image;
  }

如何使用？

从onclick事件中请求对象。
根据对象中的信息构建图像标记。
将新图片代码转移到ID为“rightcol”的元素

其他选项

您还可以从href="#"代码中删除<a>，直接从onclick event开始工作，然后应用style="cursor:pointer;"。然后它将像普通超链接一样工作但没有刷新。

<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>

如何从缩略图停止自动刷新onclick？

1 个答案: