a标签点击后, 停留一秒后再跳转页面?

作者站长头像
站长
· 阅读数 9

在a标签点击后会有短暂的动画效果, 类似 loading, 动画结束后再跳转页面, 有什么方法能实现这样的功能?

回复
1个回答
avatar
test
2024-07-05

如楼上所说,只能js劫持一下点击事件

<a href="https://www.baidu.com" target="_blank" onclick="onLinkClick" >这是个链接</a>

<script>
  const onLinkClick = function(e) {
    // 阻止默认跳转行为
    e.preventDefault();
    // 设置loading
    // ...
    const href = e.target.getAttribute('href');
    const openType = e.target.getAttribute('target');
    // 1秒后跳转
    setTimeout(() => {
      window.open(href, openType);
    }, 1000);
  }
</script>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容