页面中使用空链接时,通常点击该空链接不会打开一个新页面,只是借助这个它触发一个点击事件,进而完成一系列的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>。
没什么可说的,至于为什么这样写可以做到防页面跳动,自己去探索吧。
当然肯定还有其他的处理方法。如果你也闲得蛋疼的话,告诉我吧,大虾们!!
分享到:
相关推荐
空链接 href="#"与href="javascript-void(0)"的区别.docx
链接当前页面。 ------------------- 通常有如下用法: 关闭</a> 将href="#"是指联接到当前页面,其实是无意义的,页面也不会刷新,关键是后面的onclick,当点击“关闭”时,会执行window.close...
如果用户选择了 <a> 标签中的内容,那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档,或者执行 JavaScript 表达式、方法和函数的列表。 2.herf定义 herf属性 定于语法:<a href="URL"> 3.定于语法与...
有些时候做的东西刚好要用到链接,但又不需要去链接,只需要对onclick事件进行处理,如果一个#容易导致点击页面后,页面跳动,这么分享三种方法,方便需要的朋友
PHP替换HTML文件中所有a标签的HREF属性,其他代码不变,不管执行多少次都不变
而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a标签的一种写法<a></a>,所以就来整理下a标签中href的几种用法。 一、js的几种调用方法(参考总结的) 1、a href="[removed]js_method();" 这...
js特效之锚标记滚动,记得下载后评论加分啊
详解js location.href和window.open的几种用法和区别.docx
HTML 导航栏链接特效 <a href="#">Wafture <a href="#">Sumptuous <a href="#">Scintilla <a href="#">Propinquity <a href="#">Harbinger <a href="#">...
1.链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接); 2.假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值...
注意是跳动到了页首的区别,最好用void(0) 用户体验好点。
a href=#> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a> 点击链接后,页面不动,只打开链接 <a> 作用同上,不同浏览器会有差异。 点击链接后,不想使...详解href=#与href=[removed]void(0)的区别 #包
NULL 博文链接:https://onestopweb.iteye.com/blog/2319174
Web应用安全:href属性与src属性的XSS(实验).docx
一、location.href常见的几种形式 self.location.href;//当前页面打开URL页面 [removed].href;//当前页面打开URL页面 this.location.href;//当前页面打开URL页面 location.href;// 当前页面打开URL页面 parent....
当点击a标签后,要使其跳到页面里面相应的地方,方法很简单,a标签里面href属性便可轻松做到,将href中的内容和你要跳到这个区域的id同名即可,需要的朋友可以参考下
html中,在标签中设的href调用js代码,共有以下几种方式 <a href ="javascript:void(0);" onclick ="js_method()"> <a href = "javascript:;" onclick ="js_method()"> <a href = "#" onclick ="js_method();...
友情链接<a href="#"></a></h1> <option>-- 相关机构 -- <option>item2 <option>item3 <option>item4 <option>-- 政府部门 -- <option>item2 <option>item3 <option>item4 <option>-- 下属...