关于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默 ...
随机推荐
- wkhtmltoimage(网页剪切功能)
1.wkhtmltoimage使用wkhtmltoimage-0.10.0_rc2-static-amd64.tar.bz2版本,最新版本为wkhtmltoimage-0.11.0_rc1-stati ...
- C#应用视频教程2.1 OPENGL虚拟仿真介绍
OPENGL的虚拟仿真对于工控自动化的意义很大,虽然市面上有很多的第三方软件比如Solidworks,Mathlab,ProE等等软件可以做仿真,而且能够实现的功能包括了流体分析,力学分析,摩擦力分析 ...
- android源代码在线阅读
http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android/android/
- 无法加载协定为“JavaWebService.UserInfoDelegate”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。
原因是: 在vs 2008中使用C#,多次添加/删除服务引用后,app.config文件并不会自动修改, 在添加/删除后,会生成多个“endpoint”,手工删除即可. app.config中的内容: ...
- ubuntu 下安装 VIM 依赖vim-common错误
ubuntu 下安装 VIM 依赖vim-common错误 sudo apt-get remove vim-common 先把上面的错误依赖删除 sudo apt-get install vim ...
- cookie 封装
1.代码 ;(function (factory) { var registeredInModuleLoader; if (typeof define === 'function' && ...
- Android Exception 5（startActivityForResult & singleTask）
昨天碰到一个很诧异的事情,主要内容是1.startActivityForResult(intent2, 302);2.onActivityResult 问题是:onActivityResult调用时间 ...
- Linux下的编译器（转）
转自:http://ju.outofmemory.cn/entry/2051 简单的说,编译器就是一个可执行程序,它专门用于将程序员易于编写的高级语言 (如 C 语言) 翻译为机器可以识别的低级语言. ...
- 【转载】php如何给APP端写接口
如何写好接口 目的:清楚明白所写接口的用途 安全性:做好接口的安全性,防止接口数据泄露,做好必要的参数加密措施 按需分配: 接受值和返回值要实用,不接受和返回不需要的数据,返回值返回什么应与使用者时时 ...
- Redis总结（一）Redis安装(转载)
最近项目中需要使用Redis,刚好这两天有时间,便总结记录一下Redis的安装,以及如何在.NET中使用Redis. Redis是一个用的比较广泛的Key/Value的内存数据库.目前新浪微博.Git ...