Как остановить автообновление по клику с миниатюр?
У меня есть галерея изображений на моем сайте, в которой используются миниатюры, которые увеличиваются над линией миниатюр при нажатии. У меня проблема с автообновлением; каждый раз, когда я нажимаю на одну из миниатюр, страница обновляется, и восстанавливается ее "главное изображение".
Я не отказываюсь (и отчасти отказываюсь на том основании, что считаю, что все это можно сделать с помощью простых 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='#'">
Не совсем уверен, почему это сработало, но хотелось бы объяснения...?
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;
}
Как это используется?
- Запросить объект из события onclick.
- Создайте тег изображения на основе информации в объекте.
- Перенесите новый тег изображения в элемент с идентификатором 'rightcol'
Другие опции
Вы также можете удалить href="#"
от <a>
помечать и работать прямо из onclick event
а затем применить style="cursor:pointer;"
, Тогда он будет работать как обычная гиперссылка, но без обновления.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>