a标签的href与页面跳转的默认行为

概念

a标签的默认跳转链接行为是由href来实现的,同时设置href属性可以使a标签在hover状态下以手指指示的样式显示。但实际过程中发现对a标签的href属性的不同设置,可能会导致不同的行为反馈,故想要进行几种不同的设置情况总结一下。

1.a标签中设置href属性,没有赋任何值

<a href></a>

点击a标签会刷新页面,回到顶部。

2.a标签中设置href属性,赋值href="#"

<a href='#'></a>

点击a标签后会回到页面顶部,但不刷新页面。

3.a标签中设置href属性,其中赋值使用javascript语句,另外设置onclick点击事件

<a href='javascript:viod(0)' onclick="go()"></a>

javascript:viod(0)语句控制页面不进行跳转也不进行刷新,点击之后也不会回到页面顶部,使用javascript代码阻止了href属性的默认跳转链接行为。a标签点击后会执行onclick中设定函数go()。

4.a标签中设置href属性,但赋值使用javascript语句,另外设置onclick点击事件

<a href='javascript:return false' onclick="go()"></a>

此方法与上一种方法实现效果类似,一样是href属性中执行js代码,使用return false告诉浏览器要阻止href属性的默认行为,如跳转链接,刷新页面,回到顶部等,此方法依然可执行go()函数。

5.a标签中设置href属性但不进行赋值,设置onclick点击绑定事件

<a href onclick="go()"></a>

点击a标签,会触发点击绑定事件,执行函数go()的相关操作,但同时也会由于href的设置进行页面的刷新,当执行绑定事件的操作函数,在完成之前或者执行过程中进行了页面刷新,对应的页面结果也会被重新刷新,并且回到页面顶部。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,709评论 1 92
  • 欢迎您来访https://leezhang521.github.io a标签的javascript:void(0)...
    leeolady阅读 11,302评论 0 4
  • 李钢神色凝重,抬头望了望天,便转身离开。寒鸦归巢,天色已晚,乌啼渐起,暮气沉沉,没有一丝鲜活的表情。打他来到这块人...
    安言靜语阅读 2,415评论 0 0
  • 生活中总有你预料不到的不愉快和小确幸,或喜或悲,看你对待生活的态度和坚持。而生命中某些珍贵的片刻,其实都来自于一...
    约见九公子阅读 2,325评论 0 0

友情链接更多精彩内容