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. 剑指offer 面试8题

    面试8题: 题目:二叉树的下一个节点 题目描述:给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 解题思路:详见剑 ...

  2. SQLServer导入Excel，复杂操作

    导入Excel 先导入的时候报错了, 提示未在本地计算机上注册"Microsoft.ACE.Oledb.12.0"提供程序.(System.Data),去网址下个软件安装就搞定了, ...

  3. vimium的使用介绍和基本用法

    vimium是chrome浏览器的一个插件,fq去chrome应用商店搜索vimium,下载安装 纯键盘操作,脱离了鼠标,提高效率 核心是f,安装好vimium后只需要按f,输入对应的编号就能进入相应 ...

  4. 【转】Linux磁盘文件系统类型

    1. 查询命令 [root@mail ~]# df -Th 参数说明: -T 显示文件系统类型. -h:以容易理解的格式输出文件系统大小,例如124KB.345MB.46GB. 转自:https:// ...

  5. iOS 关于 Missing iOS Distribution signing identity for.... 等 打包 校验 出现的事故 处理经验

    着实郁闷了一阵子,不知道为什么 证书和配置文件都没有问题 在Archieve后  validate 提示:"Missing iOS Distribution signing identity ...

  6. OC知识点(类方法,构造方法,组合模式,get,set方法,自动生成属性)

    1.类方法的优势 不用创建对象,节省了空间,直接用类名调用类方法,类方法为外界提供一个方便的调用接口.(特点:类方法以加号开头,不能使用自身的成员变量,它的调用不依赖成员变量) 2.构造方法(初始化成 ...

  7. springboot-数据库

    Spring-data-jpa jpa定义了一系列持久化的标准,比如hibernate就实现了这一标准. Springboot 的jpa就是hibernate的整合. 在pom文件中增加配置: < ...

  8. iMX6 yocto平台QT交叉编译环境搭建

    转:https://blog.csdn.net/morixinguan/article/details/79351909 . /opt/fsl-imx-fb/4.9.11-1.0.0/environm ...

  9. 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用

    在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...

  10. php数组函数-array_flip()

    array_flip()函数返回一个反转后的数组,如果同一个值出现多次,则最 后一个键名作为它的值,所有其他的键名将丢失. 如果原数组中的值得数据类型不是字符串或整数,函数将报错. array_fli ...