0

私のサイトには、クリックするとサムネイル ラインの上に拡大するサムネイルを使用する画像ギャラリーがあります。自動更新に問題があります。サムネイルの 1 つをクリックするたびに、ページが更新され、「マスター イメージ」に復元されます。

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>直接作業してからonclick eventを適用することもできますstyle="cursor:pointer;"。その後、通常のハイパーリンクのように機能しますが、更新はありません。

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