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

    开启POP3/SMTP服务器,需要发送短信,然后点击我已发送,得到一个指定的密码   开启之后得到的授权码   开启IMAP/SMTP还需要发送一次短信,得到一个另外的授权码   然后在后台设置为下面 ...

  2. iOS 设置app语言中文，比如 copy中文，拍照按钮cancel 中文

    iOS 设置app语言中文,比如 copy中文,拍照按钮cancel 中文 一:如何设置项目中文环境 targets--->Locatization native development reg ...

  3. QQ互联简单例子,七彩花都提供

    QQ互联简单例子 源码由七彩花都论坛提供 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  4. JUnit 3.8 通过反射测试私有方法

    测试私有(private)的方法有两种: 1)把目标类的私有方法(修饰符:private)修改为(public),不推荐,因为修改了源程序不佳 2)通过反射 (推荐) 代码演示: 目标程序 Priva ...

  5. Jquery重新学习之七[Ajax运用总结A]

    Jquery中Ajax的运用是另外一个重点,平时项目经常会用它进行一些异步操作:其核心是通过XMLHttpRequest对象以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而 ...

  6. Matlab interpgui

    function interpgui(arg1,arg2) %INTERPGUI Behavior of interpolating functions. % Demonstrates interpo ...

  7. Java Callable 与 Future

  8. myDate97用法

      myDate97用法 CreateTime--2017年5月12日11:00:32Author:Marydon 一.基本用法 官网链接:http://www.my97.net/index.asp ...

  9. dubbo初探（转载）

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  10. 如何配置 Oracle VirtualBox 中的客户机与物理机网络

    当你在 Oracle VirtualBox 虚拟机软件 中安装了各种操作系统时,你可能需要实现物理机与虚拟机之间的相互访问. 在这篇文章中,我们将会以最简单明了的方式来说明如何配置客户机与 Linux ...