点击后退按钮回到本页面中的另一个标签页(tab)
在使用zepto进行微信网页开发的时候,遇到一个情况,在本页面存在四个TAB栏,每点击一个栏会显示相应的内容,下图这种:
现在有一个需求是,用户点击了后退按钮,需要回到上一次点击的tab栏。
这个需求可以使用history对象进行进行处理。
首先就是history.pushState方法和history.replaceState以及window的popstate对象。每次history的回退或前进,都会触发popstate事件,所以我们就使用popstate事件做文章。
1、首先,点击tab栏的时候,将点击的tab栏的信息使用pushState方法在history对象中写入一条新纪录,比如我点击第一个tab栏的时候,就将它的index值写入url的hash中。
2、window上绑定popstate事件,当我点击了后退按钮,触发popstate事件,此时我取出url中的hash值,它记录着上次点击tab栏的index信息。根据这个index信息处理tab栏的显示与隐藏。
代码示意:
// 添加标签页hash,首次进来时添加hash为p=0.
if (!window.location.hash) {
history.replaceState(null, null, '#p=0');
}
// 给tab栏绑定点击事件,点击事件处理两件事:显示需要显示的内容,如果tab的index和url中的index信息不同,那么push进入一条新的历史记录。
$('.navbar_item').click(function(event) {
var page_idx = + (window.location.hash && window.location.hash.substr(-1));
var idx = $(this).index();
if (page_idx !== idx) {
history.pushState(null, null, '#p='+idx);
}
$('.page_navbar').forEach(function(ele, idx2) {
// 处理tab栏样式
$(ele).find('.navbar_item').eq(idx).addClass('active').siblings('.navbar_item').removeClass('active');
});
// 显示tab对应的内容
$('.page_navcontent').eq(idx).show().siblings('.page_navcontent').hide();
$('.page').scrollTop(0);
});
// 绑定popstate事件,触发事件后根据url中的tab的index信息进行处理
$(window).on('popstate', function(event) {
var idx = + (window.location.hash && window.location.hash.substr(-1));
$('.page_navbar').eq(0).find('.navbar_item').eq(idx).trigger('click');
});
大概意思是这样的,但是tab的index信息也不一定要放在url的hash中,也可以放在pushState的第一个参数——state对象中进行处理。
点击后退按钮回到本页面中的另一个标签页(tab)的更多相关文章
- 在一个jsp页面中引用另一个jsp文件的路径的问题
为了提高代码的重用性,经常需要在一个jsp页面中引用另一个jsp文件的代码.关于引用时的路径的问题.下面只介绍动态引用的,我觉得静态引用的应该也一样. 相对路径: 一.在同一个文件夹下,a.jsp中引 ...
- 问题:asp.net 点击button按钮调到页面顶部;结果:asp.net点击一个按钮,使页面跳转到本面页上的指定位置
asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it 最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中 ...
- 在JSP页面中调用另一个JSP页面中的变量
在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...
- JSP页面中引入另一个JSP页面
一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bo ...
- html页面中插入html的标签,JS控制标签属性
html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...
- selenium控制超链接在当前标签页中打开或重新打开一个标签页
selenium控制超链接在当前标签页中打开或重新打开一个标签页 在web页面源码中,控制超链接的打开是在当前标签页还是重新打开一个标签页,是由属性target=“_black”进行控制的.如果还有属 ...
- 在html页面中引入另一个html页面
我们在使用html编写一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引 ...
- jsp页面中怎么利用a标签的href进行传递参数以及需要注意的地方
jsp页面中: <a href="${pageContext.request.contextPath }/infoController/getProductInfo?productId ...
- 在QMainWindow中利用多个QDockWidget构成标签页tab(原创)
功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...
随机推荐
- 笔记:Struts 2.3.31 配置说明
复制文件到站点的 WEB-INF\lib 目录,文件列表如下,黄色突出显示的是必须加入的核心包 struts2-core-2.3.31.jar:struts2 的核心库 xwork-core-2.3. ...
- TCP 详解
计算机网络中比较中要的无非就是 TCP/IP 协议栈,以及应用层的 HTTP 和 HTTPS . 前几天一直炒的的比较火的就是 HTTP/2.0 了,但是其实 HTTP/2.0 早在2015年的时候就 ...
- POJ-1256 next_permutation函数应用
字典序列: 在字典序中蕴含着一个点,就是大小的问题,谁先出现,谁后出现的问题.譬如a<b<c,出现顺序就是a,b,c. 本题中字符集是所有大小写字母,而题目中规定的谁大谁小已经不是按asc ...
- Shell 读取用户输入
14.2 读取用户输入 14.2.1 变量 上一章我们谈到如何定义或取消变量,变量可被设置为当前shell的局部变量,或是环境变量.如果您的shell脚本不需要调用其他脚本,其中的变量通常设置为脚 ...
- webpack-dev-server 设置反向代理解决跨域问题
一.设置代理的原因 现在对前端开发的要求越来越高,并且随着自动化以及模块化的 诞生,前后端开发模式越来越流行.后端只负责接口,前端负责数据展示.逻辑处理.但是前后端开发模式,有一个重要的问题,就是跨域 ...
- SDK提交到CocoaPods
一:GitHub新建仓库,并clone到本地 1.注册GitHub账号并登录 2.右上方点击+,新建仓库(仓库名字(Repository name).仓库权限(Public).readme.licen ...
- JavaWeb学习笔记三 Servlet
Servlet 是运行在服务端的Java小程序,是sun公司提供一套规范(接口),用来处理客户端请求.响应给浏览器的动态资源.但servlet的实质就是java代码,通过java的API,动态的向客户 ...
- node初始
### 一.什么是node.js > Node是一个基于 Chrome V8 引擎的 JavaScript 运行环境 > > Node使用了一个事件驱动.非阻塞式 I/O 的模型,使 ...
- 第2次作业:软件分析之Steam
1. 作业内容 1.1 介绍产品相关信息 你选择的产品是? 我选择的分析的软件为STEAM 为什么选择该产品作为分析? 在上述列表中的产品,除了王者荣耀,其他几项都是平时我使用较为频繁的软件,所以最初 ...
- 集大1513 & 1514班 软件工程第一次作业评分与点评
谢谢大多数同学按时完成了作业,同学态度都比较端正,没有为了完成作业或者讨好老师而说一些假话空话. 很多同学选择CS之前并没有从兴趣或者擅长出发.这是一个普遍的现象,十年前我们是这样,十年后的孩子们还是 ...