0

我的网站上有一个图片库，它使用的缩略图在单击时会放大到缩略图线上方。我遇到了自动刷新问题；每次我单击其中一个缩略图时，页面都会刷新，从而将其恢复为“主图像”。

尽管我对 HTML 的了解充其量只是业余爱好者，但我不会（并且有点拒绝，因为我相信这一切都可以通过简单的 CSS 和 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='#'">

不太确定为什么会这样，但希望得到解释......？

4

1 回答 1

0

为什么不直接使用一些简单的 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;
  }

它是如何使用的？

  1. 从 onclick 事件中请求对象。
  2. 根据对象中的信息构建图像标签。
  3. 将新的图像标签转移到 id 为“rightcol”的元素

其他选项

您还可以href="#"从<a>标签中删除 并直接从 theonclick event然后应用style="cursor:pointer;"。然后它将像常规超链接一样工作，但没有刷新。

<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>
于 2012-06-26T02:50:55.937 回答