简单使用location.hash的方法，怎么做，有什么用？简单的js路由页面方法。

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需求

简单使用location.hash的方法 ，怎么做，有什么用？ 简单的js路由页面方法。

简单使用location.hash的方法，怎么做，有什么用？简单的js路由页面方法。