关于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的域名即可跳转到相应的选项卡， 并且还有历史记录的存在，可以通过浏览器的前进后退来进行控制噢。
