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

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

实现效果

7fd1660b5d23470a83fd451c92d0ab66.gif

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

相关文章
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
88 10
|
2月前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
58 5
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
113 2
前端JS读取文件内容并展示到页面上
|
2月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
63 4
|
2月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
77 2
|
3月前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
33 1
|
2月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
66 0
|
3月前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
38 0