关于HTML5中hash部分API在历史管理,选项卡自动跳转中的一点使用
2017-07-18 16:45
351 查看
在群里最近有人提到如何处理在页面跳转之后,想要直接定位到相对应的选项卡的选项上,比如首页有登录和注册两个按钮,而登录注册页面有一对选项卡分别对应的是登陆和注册,想要实现的功能是点击登陆去到登录页的登录部分,而点击注册去到登录页的注册部分,考虑之后发现可以利用html5中关于hash的一些API以及事件来进行处理,下面是代码
HTML部分代码
CSS代码
JS代码
看完代码之后,大家可以自己写个demo,把上面的代码直接复制下来,大家可以发现实现上面那个功能的主要思路
在点击按钮的时候把按钮相关的自定义属性值赋给hash
通过内容区的自定义属性的值跟页面url的hash值来做比对显示相对应的div
在页面的hash发生变化时即点击按钮的时再去显示相对应的div
最后通过上面的方法我们可以实现浏览器本地的跳转,而且在复制了带有hash的域名在进行分享的时候,其他人打开带有hash的域名即可跳转到相应的选项卡, 并且还有历史记录的存在,可以通过浏览器的前进后退来进行控制噢。
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的域名即可跳转到相应的选项卡, 并且还有历史记录的存在,可以通过浏览器的前进后退来进行控制噢。
相关文章推荐
- 使用Xcode阅读Makefile管理的C/C++项目源码(支持调试,符号跳转,自动补全)
- 关于音频管理的一点使用
- 关于音频管理的一点使用
- HTML5关于上传API的一些使用(下)
- Winform(C#.NET)自动更新组件的使用及部分功能实现(一点改进功能)
- 关于Android使用git版本管理工具的一点记录
- HTML5关于上传API的一些使用(中)
- 关于本地管理的Extent分配使用 AutoAllocate 方式时,是如何自动分配Extent的
- html5的onhashchange和history历史管理
- HTML5关于上传API的一些使用(上)
- html5—历史管理(通过跳转页面))
- HTML5历史状态管理history API-pushState/replaceState与popstate事件
- 关于codesmith的一点使用--自动生成数据库中所有表的存储过程使用模板
- 关于使用sping MVC框架进行文件上传的一点感受
- 使用.net开发手机管理软件 (十二) 短信部分——通过RS232发送和接收短信
- 使用.net开发手机管理软件 (六) OBEX应用——文件传输部分
- 使用.net开发手机管理软件 (十一) 短信部分——VB.NET编码PDU
- 使用.net开发手机管理软件 (九) 短信部分——PDU简介及其格式
- 使用ASP.NET中的一点体会--关于代码分离(转载)
- 关于fopen函数中路径名使用字符串的一点看法