hash 属性是一个可读可写的字符串，该字符串是URL的锚部分(从#号开始的部分).
语法
location.hash
刚开始我真不知道hash有什么用，直到我在项目中遇上一个最大的问题。而且很恶心的体验
我的简单案例
在我这个项目中，好多页面都是tab选项
比如选项1 选项2 选项3 选项4
但我单击选项3 想看选项3的下面内容。
我一刷新又恢复到选顶1 默认的效果。
不能保存页面状态。为此我真被自己恶心到 ，也有替用户考虑过，毕竟我深有体会过用户是最好的体验。
我在想刷新如何保存选项3和下面的内容呢，而不是按F5重新载入又恢复到最始化~
于是我想到了一个办法 用location.hash。
如果你是新手你可以打开控制台
然后输入location.hash 比如www.baidu.com#fr
结果是#fr
我再举个例子并贴出代码 你们测试看看有什么不同？ 比如按每日任务刷新一下 会不会回到新手任务的选项状态？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="person_rights"> <h2 class="tab_h2"> <span class="selected" href="#news">新手任务 </span> <span href="#day">每日任务</span> <span href="#active">活动任务</span> <span href="#jifen">积分规则</span> <span href="#deep">等级权益</span> </h2> <div class="abar"> <ul class="integral"> <li> 1111111111111 </li> <li> 222222222222 </li> </ul> <ul class="integral" style="display:none;"> <li> 每日任务 </li> </ul> <ul class="integral" style="display:none;"> <li>活动任务</li> </ul> <ul class="jifen" style="display:none;"> <li>积分规则</li>> </ul> <ul class="deep" style="display:none;"> <li> 积分规则 </li> </ul> </div> </div> <script src="js/jquery.js"></script> <script>var $div_li = $(".tab_h2 span"); $div_li.click(function() { $(this).addClass("selected").siblings().removeClass("selected"); var URLS=$(this).attr("href"); location.hash=URLS; var index = $div_li.index(this); $(".abar>ul").eq(index).show().siblings().hide(); }); </script> </body> </html>
上面的代码明显不会
我再贴出一段代码
var j=5;
for(i=0;i<j;i++){
var ti=$(".tab_h2 span").eq(i).attr("href");
if(location.hash==ti){
$(".tab_h2 span").eq(i).addClass("selected").siblings().removeClass("selected");
$(".abar>ul").eq(i).show().siblings().hide();
}
};
把这段代码和上面放一起。再测试一下 会不会有变化 。
注意自行引用jquery库（本人不提供jquery)
//cdn.bootcss.com/jquery/3.1.0/jquery.min.js
请自行复制并替换
<script src="js/jquery.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
location.hash需求