首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

空链接中的href属性含有“#” 引起页面跳动 的几种解决方法

2012-07-01 
空链接中的href属性含有“#” 引起页面跳动 的几种解决办法? ?? 页面中使用空链接时,通常点击该空链接不会打

空链接中的href属性含有“#” 引起页面跳动 的几种解决办法

? ?? 页面中使用空链接时,通常点击该空链接不会打开一个新页面,只是借助这个它触发一个点击事件,进而完成一系列的js操作。

???? 以前空链接的href属性通常使用"#"来填充,但当页面出现滚动条时,点击空链接,页面会跳动到页首,给人的感觉很不爽。

??? 为什么当用"#"填充空链接时会出现页面跳动的现象?原因是"#"被默认为锚点"#top",即跳转到本页页首。

?

?? 查找了下资料, 以下为自己尝试过的3种解决办法:

??? 1、使用3个#号,<a href="###" onclick="">链接</a>。

??????? 为什么要用3个呢,不得其解。也没有查资料了,本来就是一个让人蛋疼的问题。。

??????? 试了下使用两个#,ff和chrome下可以防页面跳动,IE8下页面依然跳页首(其他IE没有测试,应该也会跳动吧)。

??????? 3个#,这几个浏览器就都能防页面跳动了。

??????? 当然你如果不闲麻烦的话,使用4个#、5个#甚至更多#时,页面跳动现象也可解决。

??? 2、使用javascript:void(0),<a href="javascript:void(0)" onclick="">链接</a>。

???????? 这种写法曾经给我留下过深刻的印象,可让我吃过大苦头啊。

???????? 它在各个浏览器下均可正常工作(这里的正常工作,指防止页面跳动)。但在IE6下它会防止页面整体刷新(ff、chrome、IE8下不会出现这样的状况,其他浏览器就不得而知了),所以你的onclick事件中如果有页面整体刷新这样的操作时,最好还是不要使用这种写法了。 当时就是因为涉世不深,导致了调此bug到深夜的痛苦经历,最终是在师傅的指导下解决了此bug。

??????? 也许正因为它有防页面整体刷新的操作,在ajax的交互中用的比较多。

??????? 至于javascript:void到底是个什么玩意,自己去baidu或google吧。懒得在这贴了。

??? 3、在onclick事件函数中使用return false,<a href="#" onclick="return false">链接</a>。

???????? 没什么可说的,至于为什么这样写可以做到防页面跳动,自己去探索吧。

?

???? 当然肯定还有其他的处理方法。如果你也闲得蛋疼的话,告诉我吧,大虾们!!

热点排行