【JavaScript】给一个div块添加链接,实现点击跳转页面

我是一个甜甜的大橙子🍊,欢迎关注✉️!
我相信技术的力量💪
努力将所学分享给大家😎
你的点赞❤️分享🚀收藏📖就是对我最大的鼓励!

实现效果

在这里插入图片描述

实现方法1:

使用 window.open 跳转,语法:window.open(*URL,name,specs,replace*) ,如下代码所示:

 <div class="col-sm-6 col-lg-3" onclick="window.open('{{ url_for('user.inform') }}','_self')">
   <div class="card bg-primary">
     <div class="card-body clearfix">
       <div class="pull-right">
         <p class="h3 text-white m-b-0 fa-2x">通知</p>
       </div>
       <div class="pull-left">
           <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-alert-circle-outline fa-2x"></i></span>
       </div>
     </div>
   </div>
 </div>

_self:代表在当前窗口打开,默认是 _blank,在新页面打开。

实现方法2:

使用 window.location.href 跳转,如下代码所示:

 <div class="col-sm-6 col-lg-3" onclick="window.location.href='{{ url_for('user.inform') }}';return false">
   <div class="card bg-primary">
     <div class="card-body clearfix">
       <div class="pull-right">
         <p class="h3 text-white m-b-0 fa-2x">通知</p>
       </div>
       <div class="pull-left">
           <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-alert-circle-outline fa-2x"></i></span>
       </div>
     </div>
   </div>
 </div>

return false:取消默认的事件行为,例如你给a标签增加了href,就会既执行函数也会跳转,例如:hello

由于我使用的jinja2模板,所以链接是href='{{ url_for('user.inform') }}',大家使用的时候要注意更换。

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一个甜甜的大橙子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值