Как остановить автообновление по клику с миниатюр?

Question

У меня есть галерея изображений на моем сайте, в которой используются миниатюры, которые увеличиваются над линией миниатюр при нажатии. У меня проблема с автообновлением; каждый раз, когда я нажимаю на одну из миниатюр, страница обновляется, и восстанавливается ее "главное изображение".

Я не отказываюсь (и отчасти отказываюсь на том основании, что считаю, что все это можно сделать с помощью простых 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 Script

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

Как это используется?

1. Запросить объект из события onclick.
2. Создайте тег изображения на основе информации в объекте.
3. Перенесите новый тег изображения в элемент с идентификатором 'rightcol'

Другие опции

Вы также можете удалить href="#" от <a> помечать и работать прямо из onclick event а затем применить style="cursor:pointer;", Тогда он будет работать как обычная гиперссылка, но без обновления.

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