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>

        </li>

        <li>

        </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路由页面方法。的更多相关文章

  1. 网站开发进阶(二十六)js刷新页面方法大全

    js刷新页面方法大全 在项目开发过程中,需要实现刷新页面.经过学习,发现下面这条语句就可以轻松实现. location.reload(); // 刷新页面 有关刷新页面的其它方法,具体学习内容如下,有 ...

  2. js刷新页面方法大全（转）

    刷新页面实现方式总结(HTML,ASP,JS) 转载  2008-11-13   作者:    我要评论 多种方法实现页面的刷新代码 定时刷新: 1,<script>setTimeout( ...

  3. paip.编程语言方法重载实现的原理及python,php,js中实现方法重载

    paip.编程语言方法重载实现的原理及python,php,js中实现方法重载 有些语言,在方法的重载上,形式上不支持函数重载,但可以通过模拟实现.. 主要原理:根据参数个数进行重载,或者使用默认值 ...

  4. js刷新页面方法大全

    如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, ...

  5. js刷新页面方法

    1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取 ...

  6. html框架集 js刷新页面方法大全

    一.先来看一个简单的例子: 下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做. frame.html 由上(top.html)下(bottom ...

  7. js刷新页面方法 -- （转）

    1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里 ...

  8. 利用js刷新页面方法

    1,reload 方法,该方法强迫浏览器刷新当前页面. location.reload(force) 如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-S ...

  9. location.hash属性介绍

    location.hash属性介绍 例如URL: http://wwww.a.com/index#rhythmk 通过location.hash 我们将获取到 #rhythmk. 默认浏览器会滚动至i ...

随机推荐

  1. Python排列组合

    product 笛卡尔积 (有放回抽样排列) permutations 排列 (不放回抽样排列) combinations 组合,没有重复 (不放回抽样组合) combinations_with_re ...

  2. orange安装文档

    一.Orange简介    Orange是一个基于 OpenResty/Nginx 的 API Gateway,提供 API 及 “自定义规则” 的监控和管理,如访问统计.流量切分.AB 测试.API ...

  3. Way to OpenSource

    @1:Follow any instructions in the readme and make sure that you can configure and run the project on ...

  4. Spring boot cassandra - nested exception is com.datastax.driver.core.exceptions.NoHostAvailableException

    1.在Pom.xml添加spring-boot-starter-data-cassandra依赖: <dependency> <groupId>org.springframew ...

  5. Kattis - register 【水】

    题意 就是 有一堆容器,然后可以执行加的操作,每个容量是 2, 3, 5, 7, 11, 13, 17, 19 然后 有进位 比如第一个 容器,到2了,就会重置为0,然后 下一个容器+ 1, 但是要保 ...

  6. java 图片Base64字符串转图片二进制数组

    public static byte[] base64ToImgByteArray(String base64) throws IOException{ sun.misc.BASE64Decoder ...

  7. 23种设计模式UML表示形式

    一.概况:       类关系表示:   说明:           二.创建型 1.Factory Method 意图: 定义一个用于创建对象的接口,让子类决定实例化哪一个类.Factory Met ...

  8. S005SELinux(SEAndroid)的实际文件组成无标题文章

    SEAndroid 是将SELinux 移植到Android 上的产物,可以看成SELinux 辅以一套适用于Android 的策略. 那么在android系统中那些文件是与SELinux(SEAnd ...

  9. cocos2dx打飞机项目笔记五：CCSpriteBatchNode 的使用

    在上一节里,在头文件看到 定义了一个 CCSpriteBatchNode* batchNode;,在addEnemy方法里看到 batchNode->addChild(enemy); 新建的敌机 ...

  10. 基于Visual c++ 2012的php扩展开发 - 环境搭建

    软件准备 Apache2.4 php-5.6.20-Win32-VC11-x86 php-5.6.20-src mysql-5.5.45-win32 vcredist_x86.exe vs2012旗舰 ...