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

我猜你正在使用锚标签为了获得悬停的手形图标。您可以通过使用CSS获得相同的效果。

style="cursor: hand;" 

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

Answer 3

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

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

还有如一些用户已经回答，您可以使用CSS指针属性以指示可能的用户交互徘徊在点击界面项目时。

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

记住要保持它的访问提供了一个有效的URL来访问的情况下，内容是必需的（没有JavaScript的回退）。