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

【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') }}',大家使用的时候要注意更换。

MSDN工具下载