关于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默 ...
随机推荐
- js 多域名跳转
<script>try {if( self.location == "http://cnblogs.com/endv" ) { top.location.href = ...
- Android MVP 构架初试
目前讨论MVP MVVM 的架构也来越多,这种构架也很适合Android.研究MVP记录如下 源码地址RxMVP分支Tag02 原有的MVC构架 刚开始接触Android的时候会觉得Android的整 ...
- JAVA设计模式之 訪问者模式【Visitor Pattern】
一.概述 訪问者模式是一种较为复杂的行为型设计模式,它包括訪问者和被訪问元素两个主要组成部分.这些被訪问的元素通常具有不同的类型,且不同的訪问者能够对它们进行不同的訪问操作.在使用訪问者模式时,被訪问 ...
- 多用户角色权限访问模块问题”的解决思路（ 位运算 + ActionFilterAttribute ）
如果你还是不太懂位运算,请看我的文章:那些年我们一起遗忘的位运算! 下面是我在这次项目中学习到的,我眼中的位运算的应用!主要是实现 通知的3个操作: 1. 置顶 2. 设为首页 3. 同时为 “ ...
- OJ帐号保存
TOJ 614173971 HDU 宇智波佐助 POJ shiai ZOJ henyumen UVa henyumen Light OJ HENYUMEN bzoj henyumen ural 165 ...
- 一个字符串是否在另外一个字符串数组里 Array.Exists 的用法 Array.IndexOf 用法
转: using System; class Program { static void Main() { string[] array = { "cat", "dot& ...
- <续>调度算法补充
cpmpute->executors: 1.从storm配置获取<compoent-id,parallelism>集合 2.storm-task-info 获得<task-id ...
- 缺少网络连接需要的Windows套接字注册表项（浏览器无法连网）
缺少网络连接需要的Windows套接字注册表项(浏览器无法连网) CreateTime--2018年4月25日14:17:42 Author:Marydon 1.异常信息 此计算机上缺少一个或多个 ...
- C++ bool和string转换
直接贴代码吧.用g++能够编译.測试ok #include <iostream> #include <sstream> using namespace std; int mai ...
- 无法启动此程序因为计算机中丢失 xxx.dll
“无法启动此程序因为计算机中丢失 XXX.dll” 这类问题在 visual studio 中很常见… 许久不和VS打交道,一碰各种坑… 这是在 VS 2015 Community 出现的问题: (1 ...