Javascript Gallery onmouseUp带有“#”链接,但没有跳转到页面顶部

时间:2011-06-29 16:56:38

标签: javascript gallery image-gallery photo-gallery

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

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

提前致谢!

3 个答案:

答案 0 :(得分:1)

添加返回false通常会在单击#link链接时停止页面跳转到顶部。

<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="...">

答案 1 :(得分:0)

我猜你正在使用锚标记,以便在悬停时获得手形图标。使用CSS可以获得相同的效果。

style="cursor: hand;"

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

答案 2 :(得分:0)

强烈建议您不要使用锚标记。 JavaScript事件可以添加到任何DOM元素中,就像在:

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

而且,正如一些用户已经回复的那样,您可以使用CSS指针属性来指示在悬停可点击的界面项时可能的用户交互。

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

请务必提供有效的网址,以便在必要时访问内容(无javascript后备广告),以使其无法访问。