Javascript Gallery onmouseUp 带有“#”链接而不跳转到页面顶部答案

【问题标题】：Javascript Gallery onmouseUp with "#" link without jumping to top of pageJavascript Gallery onmouseUp 带有“#”链接而不跳转到页面顶部
【发布时间】：2011-06-29 16:56:37
【问题描述】：

我意识到这可能是一种“老派”的做法，但我终于让我的画廊工作了，但有一个例外。如果图库位于页面下方，则缩略图上的“#”链接会导致页面跳到顶部。有没有更好的方法来创建这个画廊？

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

提前致谢！

【问题讨论】：

标签： javascript gallery image-gallery photo-gallery

【解决方案1】：

添加return false 通常会阻止页面在单击# 链接时跳转到顶部。

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

对于您的问题，我会采用 Shawn 的解决方案并仅使用 CSS。所以删除图像周围的所有链接并将其添加到您的文档中：

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

第二个条目 (#Display) 是为了确保您的主图像没有得到指针光标。最好只在每个图像上放置一个类，然后将光标分配给具有该类的图像。看起来像这样：

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

【讨论】：

【解决方案2】：

我猜您正在使用锚标记来获得悬停时的手形图标。使用 CSS 也可以达到同样的效果。

style="cursor: hand;"

这应该会产生相同的效果，并避免锚标签的问题。

【讨论】：

【解决方案3】：

我强烈建议您不要为此使用锚标记。 JavaScript 事件可以添加到任何 DOM 元素，就像在：

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

此外，正如一些用户已经回答的那样，您可以使用 CSS 指针属性来指示悬停可点击界面项时可能的用户交互。

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

请记住通过提供有效的 URL 以在必要时访问内容来保持其可访问性（无 javascript 后备）。

【讨论】：