简单明了《a标签的href》跳转页面情况,看完秒懂!!!

什么是a标签的href ?

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

1.当href不赋任何值时:

<a href></a>
// 不赋值

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

2.当href赋值 href="#"时:

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

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

3.当href属性赋值使用javascript:viod(0)语句,并且设置onclick点击事件时:

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

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

4.当href属性赋值使用javascript语句,并设置onclick点击事件时:

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

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

5.当href属性不进行赋值,并设置onclick点击事件时:

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

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


链接:https://www.jianshu.com/p/8a2bd9792eec。

  • 5
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值