我意识到这可能是一种“老派”的做法,但我终于让我的画廊有一个例外。如果图库位于页面下方,缩略图上的“#”链接会导致页面跳到顶部。有没有更好的方法来创建这个画廊?
http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html
提前致谢!
我意识到这可能是一种“老派”的做法,但我终于让我的画廊有一个例外。如果图库位于页面下方,缩略图上的“#”链接会导致页面跳到顶部。有没有更好的方法来创建这个画廊?
http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html
提前致谢!
添加 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="...">
我猜你正在使用锚标签来获得悬停时的手形图标。您可以使用 CSS 获得相同的效果。
style="cursor: hand;"
这应该会产生相同的效果并避免锚标签的问题。
我强烈建议您不要为此使用锚标记。JavaScript 事件可以添加到任何 DOM 元素,就像在:
<li class="click-to-expand">
<img src="..." />
</li>
而且,正如一些用户已经回答的那样,您可以使用 CSS 指针属性来指示悬停可点击界面项时可能的用户交互。
.click-to-expand{
cursor:pointer;
}
请记住通过提供有效的 URL 以在必要时访问内容来保持其可访问性(无 javascript 后备)。