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数据分析》笔记2——统计学与线性代数

    统计学与线性代数 用Numpy进行简单的描述性统计计算 import numpy as np from scipy.stats import scoreatpercentile data=np.loa ...

  2. python学习之路-第二天-常见的注意事项（代码风格、运算符、优先级、控制语句）

    总结了今天学习几个注意事项: 对代码声明变量的时候没必要像以前写java或者c代码要声明数据类型,只需要赋值即可 代码一行基本只写一句逻辑行,而且尽量不在python里面写':' 明确的行连接'',暗 ...

  3. asp.net(c#)中String.Empty、NULL、"" 三者到底有啥区别和联系？

    开门见山,首先看下面代码,你认为结果分别是什么? string str = string.Empty; string str1 = ""; string str2 = null; ...

  4. win10 chrome 调试

      下载NPAPI版本的flash player: http://www.adobe.com/support/flashplayer/debug_downloads.html#fp13       禁 ...

  5. grep命令详细解析 --非原创 原作者ggjucheng

    简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...

  6. macOS 简单使用

    在macOS下进行开发,首先要能够熟练的使用macOS系统. 图形界面和触摸板的操作,时间长了自然就会熟悉,也会发现很好用. 关于快捷键有几点注意一下: Windows下好多跟ctrl结合的快捷键(如 ...

  7. 每天一个Linux命令（53）service命令

        service命令用于对系统服务进行管理.   (1)用法:     用法:  service  [服务]  [操作]   (2)功能:     功能:  service命令用于启动.停止.重 ...

  8. hadoop03---nginx+keepalived

    1.1.反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求 ...

  9. constexpr与指针

    一. 常量表达式:是指值不会改变并且在编译过程就能得到的计算结果的表达式. 定义常量表达式变量: constexpr 变量类型 变量名: 例如: constexpr int mf=20://///20 ...

  10. 吴恩达深度学习笔记（七） —— Batch Normalization

    主要内容: 一.Batch Norm简介 二.归一化网络的激活函数 三.Batch Norm拟合进神经网络 四.测试时的Batch Norm 一.Batch Norm简介 1.在机器学习中,我们一般会 ...