点击后退按钮回到本页面中的另一个标签页(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 * ...
随机推荐
- 笔记:Maven 反应堆
在一个多模块的Maven项目中,反应堆(Reactor)是指所有模块组成的一个构建结构,对于单个模块的项目,反应堆就是该模块本身,但对于多模块项目来说,反应堆就包含了各模块之间继承与依赖的关系,从而能 ...
- spring集成redis
redis是一种非关系型数据库,与mongoDB不同的是redis是内存数据库,所以访问速度很快.常用作缓存和发布-订阅式的消息队列.redis官方没有提供windows版本的软件.windows版本 ...
- Tomcat8配置tomcat-users.xml配置
默认tomcat-user.xml中的角色和用户配置示例如下: <!-- <role rolename="tomcat"/> <role rolename ...
- vue/axios请求拦截
import axios from 'axios';import { Message } from 'element-ui';import Cookies from 'js-cookie';impor ...
- php中require、require_once、include、include_once类库重复引入效率问题详解
首先我详细说下这四个引入函数 include() 与require() 的功能相同 唯一不同:require()不管是否被执行,只要存在,php在执行前都会预引入,include()则是执行到该语句时 ...
- TensorFlow拟合线性函数
TensorFlow拟合线性函数 简单的TensorFlow图构造 以单个神经元为例 x_data数据为20个随机 [0, 1) 的32位浮点数按照 shape=[20] 组成的张量 y_data为 ...
- 2018上C语言程序设计(高级)作业- 第1次作业
未来两周学习内容 复习指针的定义和引用 指针的应用场景: 指针作为函数参数(角色互换) 指针作为函数的参数返回多个值 指针.数组和地址间的关系 使用指针进行数组操作 数组名(指针)作为函数参数(冒泡排 ...
- Git使用方法2.0
## Git来源: 最早开始是由Ruby程序员们发起的.Ruby是日本的家伙搞出来的,日本有个代码托管网站叫heroku,当时用这个的人比较多,现在这个网站还能打开,网址是www.heroku.com ...
- Alpha冲刺Day12
Alpha冲刺Day12 一:站立式会议 今日安排: 由黄腾飞和张梨贤继续完成政府人员模块下的风险管控子模块下的分级统计展示 由林静继续完成企业注册模块 由周静平完成登录页面模块 二:实际项目进展 人 ...
- verilog学习笔记(4)_有限状态机
有限状态机: 有限状态机是由寄存器组和组合逻辑构成的硬件时序电路: - 其状态(即由寄存器组的1和0的组合状态所构成的有限个状态)只能在同一时钟跳变沿的情况下才能从一个状态转向另一个状态: - 究竟转 ...