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

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

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

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

转载于:https://www.cnblogs.com/wangfajing/p/7201302.html

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

组合数学在计算机科学编码中的应用,组合数学的历史、方法及在生活中的应用...
组合数学的历史.方法及在生活中的应用摘要:组合数学从数千年前开始萌芽,经历了著名的幻方问题和杨辉三角,直到莱布尼茨正式提出这一科学门类.组合数学也称为组合分析或者组合学. 简单地说, 组合数学是&qu ...
微信中无法下载APP的解决方案（微信自动跳转浏览器打开下载链接）
一.需求描述现在微信分享的功能很多,从分享的链接下载apk安卓包是很常用的一个功能.但是微信自带的scheme接口是不允许直接通过微信下载apk包的,只能通过浏览器来下载,但很多用户不知道是被屏蔽了 ...
微信中无法下载APP的解决办法---微信自动跳转浏览器打开下载链接
需求分析目前的APP基本都支持二维码扫描下载,二维码下载也成为了大家用起来很顺手的一种方式.由于微信的用户基本占据了国内市场的90%,说到扫一扫用户第一个想到的就是打开微信扫一下,通过微信分享APP ...
三款改进 Chrome 浏览历史管理的扩展程序
Google Chrome 提供了非常简便的查看过去访问网站历史的功能,默认情况下这些历史记录按照打开顺序倒序排列.但是如果要在历史记录中搜索先前访问过的网站,就比较困难了.Chrome的历史功能还缺 ...
【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...
Vue-router 中hash模式和history模式的区别
Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:&q ...
html5历史纪录管理,HTML 5 新增方法以及历史管理
@(HTML5)[HTML5 新增方法] [TOC] 十四. HTML 5 新增方法以及历史管理新增的获取元素的方法静态获取的方法: document.querySelector() 选择单个元素 ...
Use history mode for router? Vue-router 中hash模式和history模式的区别
再通过vue-cli创建项目的时候,会出现 Use history mode for router? 也就是再问你:是不是用history模式来创建路由 hash模式和history模式的不同最直观 ...
【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...

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

HTML部分代码

CSS代码

JS代码

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

最新文章

热门文章