在群里最近有人提到如何处理在页面跳转之后，想要直接定位到相对应的选项卡的选项上，比如首页有登录和注册两个按钮，而登录注册页面有一对选项卡分别对应的是登陆和注册，想要实现的功能是点击登陆去到登录页的登录部分，而点击注册去到登录页的注册部分，考虑之后发现可以利用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. 【SSH三大框架】Hibernate基础第五篇：利用Hibernate完毕简单的CRUD操作

    这里利用Hibernate操作数据库完毕简单的CRUD操作. 首先,我们须要先写一个javabean: package cn.itcast.domain; import java.util.Date; ...

  2. android.content.res.Resources$NotFoundException: String resource ID #0x0

    仔细检查是不是在settext的时候设置进去的时int属性的值,所以android会认为这是在strings中的值,所以会拿着这个int值当做string的id值去找,结果当然是找不到的.

  3. PHP出现Notice警告怎么办

    如下所示,出现Notice警告 程序并没有大错,只是一些变量没有定义,你在代码的第一行加入这一句就可以了:error_reporting(E_ALL ^ E_NOTICE); 恢复正常了.

  4. 算法笔记_135:格子取数问题(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 有n*n个格子,每个格子里有正数或者0,从最左上角往最右下角走,只能向下和向右走,一共走两次(即从左上角往右下角走两趟),把所有经过的格子里的数加起 ...

  5. InnerHtml() 与html( )的区别

    InnerHtml() 与html( )的区别 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTM ...

  6. error: command 'gcc' failed with exit status 1 while installing eventlet

    Ubuntu安装Python包出错解决办法 : sudo apt-get install python-dev sudo apt-get install libevent-dev

  7. 转:sock_ev——linux平台socket事件框架(基于字节流的测试程序) .

    原文:http://blog.csdn.net/gdutliuyun827/article/details/8257186 由于工作与学习的需要,写了一个socket的事件处理框架,在公司写的已经使用 ...

  8. JS字符编码函数区别分析

    http://www.jb51.net/article/14657.htm js对文字编码有3个函数: escape,encodeURI,encodeURIComponent, 对应的解码函数:une ...

  9. Android程序完全退出

    有几个activity,有一需求是在一个activityA点击back键退出系统而不是跳到之前的activity       首先想到的是清空activityA的堆栈,使用intent.setFlag ...

  10. Linux top里面%CPU和us%的解释

    我们有时会把%CPU和us%搞晕,也就是下图所示在top的时候查看cpu的信息. 这时有人会问:这两个CPU到底哪个是对的. 其实都是对的,只是表达的意思不一样. 官方解释如下 Cpu(s):34.0 ...