Галерея Javascript onmouseUp со ссылкой "#" без перехода на верх страницы

Question

Я понимаю, что это, вероятно, "старый школьный" способ сделать это, но я наконец-то заставил свою галерею работать с одним исключениемЕсли галерея расположена ниже на странице, ссылка «#» на миниатюрах приводит к тому, что страница переходит вверх.Есть ли лучший способ создать эту галерею?

http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html

Заранее спасибо!

Answer 1

Добавление возврата false обычно останавливает переход страницы наверх при нажатии на ссылку #.

<a href="#" onclick="return false;"><img src="..." /></a>

Для вашей проблемы я бы воспользовался решением Шона и просто использовал CSS.Поэтому удалите все ссылки вокруг изображений и добавьте их в свой документ:

<style> img{cursor:pointer;} #Display{cursor:auto;} </style>

Вторая запись (#Display) должна убедиться, что ваше основное изображение не получает курсор-указатель.Было бы лучше просто оставить класс на каждом из ваших изображений, а затем назначить курсор для изображений с этим классом.Это будет выглядеть так:

<style> img.myImage{cursor:pointer;} </style>    
<img class="myImage" src="...">

Answer 2

I настоятельно советуют вам не использовать для этого тег привязки.События JavaScript могут быть добавлены к любому элементу DOM, как в:

<li class="click-to-expand">
  <img src="..." />
</li>

А также, как уже отвечали некоторые пользователи, вы можете использовать свойство указателя CSS, чтобы указать возможное взаимодействие с пользователем при наведении курсора на элемент интерфейса, доступный для клика.

.click-to-expand{
  cursor:pointer;
}

Не забудьте сохранить его доступным, указав действительный URL-адрес для доступа к контенту в случае необходимости (без отступления JavaScript).

Answer 3

Я предполагаю, что вы используете якорный тег, чтобы значок руки при наведении курсора. Вы можете получить тот же эффект, используя CSS.

style="cursor: hand;"

Это должно создать тот же эффект и избежать проблемы с тегом привязки.