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

    iOS tabbar 图片,最佳大小方式 文档大小 30 *30 retaina 60 *60 最佳大小 48 *32 参考:http://stackoverflow.com/questions/15 ...

  2. android:ViewPager动画总结

    设置动画的方案: 我们能够使用ViewPager的setPageTransformer方法,为ViewPager设置动画.下面是几种常见动画的演示及效果: 1.CubeInTransformer wa ...

  3. selenium webdriver 的三种等待方式

    1.显式等待 一个显式等待是你定义的一段代码,用于等待某个条件发生然后再继续执行后续代码. from selenium import webdriver from selenium.webdriver ...

  4. 深入探讨Linux静态库与动态库的详解（转）

    2.生成动态库并使用 linux下编译时通过 -shared 参数可以生成动态库(.so)文件,如下 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. 一.静 ...

  5. 关于视频YUV

    这里有一篇摘自MSDN的文章.介绍了YUV视频数据格式. About YUV Video Digital video is often encoded in a YUV format. This ar ...

  6. ubuntu开启ftp服务

    首先再防火墙中开启21和20端口 iptables -A INPUT -p tcp --dport -j ACCEPT iptables -A INPUT -p tcp --dport -j ACCE ...

  7. 配置tomcat映射jsp

    <servlet>   <servlet-name>jfjf</servlet-name>   <jsp-file>/14.jsp</jsp-fi ...

  8. Mongoose使用——nodejs结合mongodb

    0. 前言: Mongoose是NodeJS的驱动,不能作为其他语言的驱动.Mongoose有两个特点: 通过关系型数据库的思想来设计非关系型数据库 基于mongodb驱动,简化操作 Mongooos ...

  9. 复制web项目，启动的时候的工程名如何改变

    右键项目->properties 然后 搜索 web  出现 Web Project Settings 右边看见  Context root 改成你希望的名字. 然后重启elipse

  10. Mysql导入大SQL文件数据问题

    如果sql文件过大,会出现mysql out of memory  (Needed XXX bytes) ,或者 "MySQL server has gone away"问题; 另 ...