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. PyQt4 颜色选择，字体选择代码

    # -*- coding: utf-8 -*- """ ------------------------------------------------- File Na ...

  2. 【转】Python爬虫(4)_selenium模块

    一 介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作, ...

  3. Centos(Yum源更改)

    第一步:备份你的原镜像文件,以免出错后可以恢复. [root@openstack yum.repos.d]#mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum. ...

  4. UIPageControl修改圆点大小，根据View大小自适应

    遇到了个基本的控件问题,当设置UIPageControl的frame很小时,上面的小圆点会忽视view的frame而将圆点显示到控件外面. 但是如果想要设置小一点的圆点,或改变圆点间的间距,从而实现自 ...

  5. Matlab命令合集 妈妈再也不用担心我不会用matlab了

    matlab命令 一.常用对象操作:除了一般windows窗口的常用功能键外.1.!dir 可以查看当前工作目录的文件. !dir& 可以在dos状态下查看.2.who 可以查看当前工作空间变 ...

  6. vue（组件、路由）懒加载

    const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...

  7. 建议41：使用argparse处理命令行参数

    # -*- coding:utf-8 -*- ''' 以现阶段最好用的参数处理标准库是argparse ''' import argparse parser = argparse.ArgumentPa ...

  8. js 元素高度宽度整理

    1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和clie ...

  9. 通过join方法顺序执行多个线程

    方法一:直接用多线程之间的通讯去解决 package com.toov5.test; import javax.imageio.ImageTypeSpecifier; class Res1{ char ...

  10. request.getPathInfo();

    request.getPathInfo(); 这个方法返回请求的实际URL相对于请求的serlvet的url的路径.(个人理解.)比如,有一个Servlet的映射是这样配置的: <servlet ...