关于HTML5中hash部分API在历史管理，选项卡自动跳转中的一点使用
在群里最近有人提到如何处理在页面跳转之后，想要直接定位到相对应的选项卡的选项上，比如首页有登录和注册两个按钮，而登录注册页面有一对选项卡分别对应的是登陆和注册，想要实现的功能是点击登陆去到登录页的登录部分，而点击注册去到登录页的注册部分，考虑之后发现可以利用html5中关于hash的一些API以及事件来进行处理，下面是代码
HTML部分代码
<body>
<input type="button" value="选项一" data-hash = "one"/>
<input type="button" value="选项二" data-hash = "two"/>
<input type="button" value="选项三" data-hash = "three"/>
<div data-content = "one" >1</div>
<div data-content = "two">2</div>
<div data-content = "three">3</div>
</body>
CSS代码
input{ width: 100px; height: 24px; line-height: 24px;}
div{width: 300px; height: 300px; background: #ccc;display: none;}
JS代码
$(function(){
$('input').click(function () {
window.location.hash = $(this).attr('data-hash'); //获取到input上的data-hash值给url上的hash
});
$(window).on("hashchange",function(){ //重点，监控hashchange，当hash值发生变化时触发
hashChangeStyle(); //显示需要显示的div
}).trigger("hashchange"); //页面加载之后触发一次hashchange以初始化
});
function hashChangeStyle(){
var hash = window.location.hash.substring(1)||"one";//截取掉#，并加上容错默认打开one
$("div").hide().filter(":[data-content='"+hash+"']").show(); //通过data-conten和hash来控制需要显示的内容
}
看完代码之后，大家可以自己写个demo，把上面的代码直接复制下来，大家可以发现实现上面那个功能的主要思路
- 在点击按钮的时候把按钮相关的自定义属性值赋给hash
- 通过内容区的自定义属性的值跟页面url的hash值来做比对显示相对应的div
- 在页面的hash发生变化时即点击按钮的时再去显示相对应的div
最后通过上面的方法我们可以实现浏览器本地的跳转，而且在复制了带有hash的域名在进行分享的时候，其他人打开带有hash的域名即可跳转到相应的选项卡， 并且还有历史记录的存在，可以通过浏览器的前进后退来进行控制噢。
关于HTML5中hash部分API在历史管理，选项卡自动跳转中的一点使用的更多相关文章
- linux shell脚本中使用expect（脚本打开新终端自动远程连接顺便输一点指令）（巨坑）
放弃吧 我找了六个小时都没找到可以用的方案(指标题括号里的内容) 给个曲线救国的方法: 现把expect脚本写成一个文件 在另一个shell脚本中调用
- [VS2008] 安装 AnkhSVN 后，选项中选择它，Pending Changes 窗口一闪而过，源代码管理工具自动跳回 【None】
执行以下命令以修复: "C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE\devenv.exe" /re ...
- HTML5自学笔记[ 8 ]历史管理
触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang=&q ...
- html5 历史管理
1.onhashchange:改变hash值来进行历史管理. <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- Kubernetes用户指南（三）--在生产环境中使用Pod来工作、管理部署
一.在生产环境中使用Pod来工作 本节将介绍一些在生产环境中运行应用非常有用的功能. 1.持久化存储 容器的文件系统只有当容器正常运行时有效,一旦容器奔溃或者重启,所有对文件系统的修改将会丢失,从一个 ...
- shell中调用jenkins API批量运行历史任务
shell中调用jenkins API批量运行jenkins带参数的任务: #!/bin/sh #startdate=20150127 startdate=20150201 while [ " ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- Vue-router 中hash模式和history模式的区别
实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...
- Vue中hash模式和history模式的区别
vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...
随机推荐
- C#控件一览表
C#控件一览表 .窗体 .常用属性 ()Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. () WindowState属性: 用来获取或设置窗体的窗口状态. 取值有三 ...
- [Angular-Scaled web] 3. Basic State with ui-router
1. Install ui-route, include js file in html and add dependence in js file. bower install angular-ui ...
- ASP.NET找不到类型或命名空间名称怎么办
如图所示,运行之后提示找不到类型或空间名称,右击有波浪线的代码,选择解析,using XXX 随后自动补上了程序集引用
- RMSE均方根误差学习笔记
1.均方根误差,它是观测值与真值偏差的平方和观测次数n比值的平方根,在实际测量中,观测次数n总是有限的,真值只能用最可信赖(最佳)值来代替.方根误差对一组测量中的特大或特小误差反映非常敏感,所以,均方 ...
- Project Euler 001-006 解法总结
Problem 1. Find the sum of all the multiples of 3 or 5 below 1000. 题目要求找出所有1000以下的3或者5的倍数之和. 最简便 ...
- Cocos2d-x 3.2 Lua演示样例 AssetsManagerTest(资源管理器）
Cocos2d-x 3.2 Lua演示样例 AssetsManagerTest(资源管理器) 本篇博客介绍Cocos2d-x 为我们提供的一个类--AssetsManager在Lua中的使用样例,效果 ...
- <LeetCode OJ> 78 / 90 Subsets (I / II)
Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset must ...
- 轻轻的我走了，正如我轻轻的来——Duilib无焦点窗体的实现
在Windows编程中,我们已经习惯了一个窗体从创建到显示并获得焦点. 我们总感觉一个窗体创建出来获得焦点是理所理所当然的.一个窗体仅仅要显示就必须获得焦点.一个新窗体显示时.会收到到WM_SETFO ...
- 深入理解JavaScript系列(转载)
深入理解JavaScript系列 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 深入理解JavaScript系列(2):揭秘命名函数表达式 深入理解JavaSc ...
- WebService一些概念
1.WebService,顾名思义就是基于Web的服务.它使用Web(HTTP)方式,接收和响应外部系统的某种请求.从而实现远程调用. 2.我们可以调用互联网上查询天气信息Web服务,然后将它嵌入到我 ...