关于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默 ...
随机推荐
- 读TIJ -7 多形性
<Think in java·第 7 章 多形性> [面向对象的程序设计语言三种最主要的特征:数据抽象.继承和多态] 在这个层面是没有什么"思想"好谈的!当你依照人们 ...
- 在Flex （Flash）中嵌入HTML 代码或页面—Flex IFrame
在flex组件中嵌入html代码,可以利用flex iframe.这个在很多时候会用到的,有时候flex必须得这样做,如果你不这样做还真不行…… flex而且可以和html进行JavaScript交互 ...
- SLAX初体验
Slax是一个便捷.便携的Linux操作系统.它的界面既充满时尚感,又可基于不同模块的功能运作.它的界面富有时尚感,并集成了不同的模块的界面.尽 管它的容量十分娇小,Slax依然预载了不少日常应用的软 ...
- Spring NamedParameterJdbcTemplate详解
NamedParameterJdbcTemplate和JdbcTemplate功能基本差不多.使用方法也类型.下面具体看下代码. db.properties jdbc.user=root jdbc.p ...
- php 命令行方式运行时 几种传入参数的方式
1. url方式 $param = array(); if ($argc > 1) { parse_str ( $argv [1], $param ); foreach ( $param as ...
- 通过LDAP验证Active Directory服务
原文地址:http://www.byywee.com/page/M0/S215/215725.html C#: using System; using System.Collections.Gener ...
- Bootstrap 3 Menu Generator
Bootstrap 3 Menu Generator
- Android异步下载
概述 实现App常见下载公共 支持通知栏显示 支持 暂停.取消功能,使用Service.AsyncTask实现异步下载.特点简单.实用.方便源码扩展修改 详细 代码下载:http://www.demo ...
- HTML-IE6兼容性问题及IE6常见BUG详细汇总
点评:IE6的兼容性问题一直都是前端工程师的恶梦,为了早早脱离这种困境,本文整理了一些相关兼容性的知识,感兴趣的朋友可以参考下哈,希望可以帮助到你- 1.终极方法:条件注释 <!--[if lt ...
- 求子数组的最大和要求O(n)
//求子数组的最大和 //输入一个整形数组.有整数也有负数,数组中连续一个或多个子数组,每一个子数组都有一个和,求全部子数组的和的最大值,要求时间复杂度O(n) #include<iostrea ...