在群里最近有人提到如何处理在页面跳转之后，想要直接定位到相对应的选项卡的选项上，比如首页有登录和注册两个按钮，而登录注册页面有一对选项卡分别对应的是登陆和注册，想要实现的功能是点击登陆去到登录页的登录部分，而点击注册去到登录页的注册部分，考虑之后发现可以利用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. Python-urllib学习记录

    urllib是python自带库,不要专门安装,还挺好用的. 脚本语言的好处之一就是随写随用,有些东西用C语言写真的是能把人累死,换成python就是几行代码,so easy,对于喜欢偷懒的同学绝对是 ...

  2. ubuntu12.04下helloworld驱动从失败到成功过程

    最近在看linux的设备驱动程序,写一个简单的helloworld程序都花了我好久的时间,具体过程如下: 编写helloworld.c 编写Makefile 注意,makefile中的命令那里是一个t ...

  3. Quartz.Net的使用（简单配置方法）定时任务框架

    Quartz.dll 安装nuget在线获取dll包管理器,从中获取最新版 Quartz.Net是一个定时任务框架,可以实现异常灵活的定时任务,开发人员只要编写少量的代码就可以实现“每隔1小时执行”. ...

  4. 算法笔记_139:二分图的最大权匹配(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 何为二分图的最大权匹配问题? 最大权二分匹配问题就是给二分图的每条边一个权值,选择若干不相交的边,得到的总权值最大. 2 解决方案 对于此问题的讲解 ...

  5. 串口通讯编程一日通3（COMMTIMEOUTS DCB整理）

    上一篇看了Overlapped IO模型后,接下来看剩下两个重要结构:  2.COMMTIMEOUTS结构 超时设置 COMMTIMEOUTS:COMMTIMEOUTS主要用于串口超时参数设置.COM ...

  6. 增强基本选择器[selector_3.html]

    增强基本选择器[selector_3.html] $("ul li:first") $("ul li:last") $("table tr:even& ...

  7. Android数据库升级实例

    第一部分 Andoird的SQLiteOpenHelper类中有一个onUpgrade方法.帮助文档中只是说当数据库升级时该方法被触发.经过实践,解决了我一连串的疑问: 1. 帮助文档里说的“数据库升 ...

  8. MPEG-4 压缩编码标准

    文章转自:http://www.cnblogs.com/CoderTian/p/8477021.html 1.MPEG-4标准概述 与MPEG1和MPEG2标准相比,MPEG-4 更加注重多媒体系统的 ...

  9. assert 函数

    assert宏的原型定义在<assert.h>中,其作用是如果它的条件返回错误,则终止程序执行,原型定义: #include <assert.h> void assert( i ...

  10. 学习XML（添加一个子节点） 摘录

    这里介绍添加XML节点的方法. 首先定义XML文件:(bookstore.xml) <?xml version="1.0" encoding="utf-8" ...