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. zookeeper单机伪集群配置

    一.配置 1.在 opt 目录下建一个文件夹 zk,分别把zookeeper 安装包复制三份,命令为zookeeper-0  zookeeper_1  zookeeper_2 2.分别在每一个zook ...

  2. SaltStack远程执行命令

    编辑fansik_cmd.sls文件: 内容如下: fansik_cmd:  cmd.run:    - unless:      - test -f /tmp/fansik.txt      - t ...

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

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

  4. ubuntu搭建mib2c环境

    1.下载net-snmphttp://net-snmp.sourceforge.net/download.html例如,下载5.5版本2.进入下载目录,解压net-snmp压缩包#tar zxf ne ...

  5. dockfile

    dockerfile是对镜像的描述 新建一个dockfile文件 docker inspect

  6. loadrunder之脚本篇——接口传参为本地文件

    导言 前几天需要对公司一个专门很重要的接口进行压测,这个还不是重点,重点是传参为本地的图片!刚刚开始通过web_custom_request()函数来解决,可是脚本并不能通过!后面又百度不到答案,通过 ...

  7. CKEditor & CKFinder集成

    CKEditor集成 CKEditor(原名FckEditor): 著名的HTML编辑器(可在线编辑HTML) 配置: ①将CKEditor中的(adapters images lang plugin ...

  8. 013_HDFS文件合并上传putmarge功能（类似于hadoop fs -getmerge）

    场景 合并小文件,存放到HDFS上.例如,当需要分析来自许多服务器的Apache日志时,各个日志文件可能比较小,然而Hadoop更合适处理大文件,效率会更高,此时就需要合并分散的文件.如果先将所有文件 ...

  9. php分类树

    class Category{ public $sonName; public $parentName; public function __consturt($id,$parent_id){ $th ...

  10. HTML如何禁止文本框输入

    禁止文本框输入有以下两种方法: 1,设置input为只读状态,代码如下: <input readonly="readonly" value="test1" ...