在群里最近有人提到如何处理在页面跳转之后，想要直接定位到相对应的选项卡的选项上，比如首页有登录和注册两个按钮，而登录注册页面有一对选项卡分别对应的是登陆和注册，想要实现的功能是点击登陆去到登录页的登录部分，而点击注册去到登录页的注册部分，考虑之后发现可以利用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，把上面的代码直接复制下来，大家可以发现实现上面那个功能的主要思路

  1. 在点击按钮的时候把按钮相关的自定义属性值赋给hash
  2. 通过内容区的自定义属性的值跟页面url的hash值来做比对显示相对应的div
  3. 在页面的hash发生变化时即点击按钮的时再去显示相对应的div

最后通过上面的方法我们可以实现浏览器本地的跳转，而且在复制了带有hash的域名在进行分享的时候，其他人打开带有hash的域名即可跳转到相应的选项卡， 并且还有历史记录的存在，可以通过浏览器的前进后退来进行控制噢。

关于HTML5中hash部分API在历史管理，选项卡自动跳转中的一点使用的更多相关文章

  1. linux shell脚本中使用expect（脚本打开新终端自动远程连接顺便输一点指令）（巨坑）

    放弃吧 我找了六个小时都没找到可以用的方案(指标题括号里的内容) 给个曲线救国的方法: 现把expect脚本写成一个文件 在另一个shell脚本中调用

  2. [VS2008] 安装 AnkhSVN 后，选项中选择它，Pending Changes 窗口一闪而过，源代码管理工具自动跳回 【None】

    执行以下命令以修复: "C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE\devenv.exe" /re ...

  3. HTML5自学笔记[ 8 ]历史管理

    触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang=&q ...

  4. html5 历史管理

    1.onhashchange:改变hash值来进行历史管理. <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  5. Kubernetes用户指南（三）--在生产环境中使用Pod来工作、管理部署

    一.在生产环境中使用Pod来工作 本节将介绍一些在生产环境中运行应用非常有用的功能. 1.持久化存储 容器的文件系统只有当容器正常运行时有效,一旦容器奔溃或者重启,所有对文件系统的修改将会丢失,从一个 ...

  6. shell中调用jenkins API批量运行历史任务

    shell中调用jenkins API批量运行jenkins带参数的任务: #!/bin/sh #startdate=20150127 startdate=20150201 while [ " ...

  7. 【前端路由】Vue-router 中hash模式和history模式的区别

    咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...

  8. Vue-router 中hash模式和history模式的区别

    实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...

  9. Vue中hash模式和history模式的区别

    vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...

随机推荐

  1. 裸裸的线段树（hdu 1754）

    线段树的第一发. 哪天忘了还能够让自己找找回顾. 线段树操作: build  : 建树. update:点改动: query:查询 Input 在每一个測试的第一行,有两个正整数 N 和 M ( 0& ...

  2. [原]理解HTTP之Content-Type

    http://homeway.me/2015/07/19/understand-http-about-content-type/ 0x01.About 查看Restful API 报头插件:utm_s ...

  3. Java开发环境配置（Win7 64位系统/server 2008）

    下面以jdk1.8.0_05版本为例: 1.在用户变量里新增变量名:JAVA_HOME 变量值:D:\Java\jdk1.8.0_05 (根据实例路径变换) 2.在用户变量里新增变量名:CLASSPA ...

  4. Windows下Hadoop编程环境配置指南

    刘勇    Email: lyssym@sina.com 本博客记录作者在工作与研究中所经历的点滴,一方面给自己的工作与生活留下印记,另一方面若是能对大家有所帮助,则幸甚至哉矣! 简介 鉴于最近在研究 ...

  5. android 自己定义组合控件

    自己定义控件是一些android程序猿感觉非常难攻破的难点,起码对我来说是这种,可是我们能够在网上找一些好的博客关于自己定义控件好好拿过来学习研究下,多练,多写点也能找到感觉,把一些原理弄懂,今天就讲 ...

  6. mybatis实战教程(mybatis in action)之四:实现关联数据的查询

    有了前面几章的基础,对一些简单的应用是可以处理的,但在实际项目中,经常是关联表的查询,比如最常见到的多对一,一对多等.这些查询是如何处理的呢,这一讲就讲这个问题.我们首先创建一个Article 这个表 ...

  7. C++二维数组讲解、二维数组的声明和初始化

    我们知道,一维空间是一条线,数学中用一条数轴来表达:二维空间是一个平面,数学中用平面坐标系来表达.那么二维数组又是什么样的呢? 线与面 我们用一个下标来描述一维数组中的某个元素,就好像在用数描述一条线 ...

  8. 线程池c3p0和dbcp2的配置初始化实例

    一.c3p0 public class ConnectionManager { public static ComboPooledDataSource dataSource; static { try ...

  9. 剑指offer代码 vs2013执行

    方法: 代码文件夹名称为:CodingInterviewChinese2-master 1. 用vs2013加载解决方案 .sln文件 2. 一个解决方案下面有多个项目,通过右键解决方案->属性 ...

  10. UIButton 按钮控件－IOS开发 （实例）

    转自:http://justcoding.iteye.com/blog/1467999 UIButton是一个标准的UIControl控件,所以如果你对UIControl不甚了解还是先看一下我的另一篇 ...