简单使用location.hash的方法 ,怎么做,有什么用? 简单的js路由页面方法。
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路由页面方法。的更多相关文章
- 网站开发进阶(二十六)js刷新页面方法大全
js刷新页面方法大全 在项目开发过程中,需要实现刷新页面.经过学习,发现下面这条语句就可以轻松实现. location.reload(); // 刷新页面 有关刷新页面的其它方法,具体学习内容如下,有 ...
- js刷新页面方法大全(转)
刷新页面实现方式总结(HTML,ASP,JS) 转载 2008-11-13 作者: 我要评论 多种方法实现页面的刷新代码 定时刷新: 1,<script>setTimeout( ...
- paip.编程语言方法重载实现的原理及python,php,js中实现方法重载
paip.编程语言方法重载实现的原理及python,php,js中实现方法重载 有些语言,在方法的重载上,形式上不支持函数重载,但可以通过模拟实现.. 主要原理:根据参数个数进行重载,或者使用默认值 ...
- js刷新页面方法大全
如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, ...
- js刷新页面方法
1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取 ...
- html框架集 js刷新页面方法大全
一.先来看一个简单的例子: 下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做. frame.html 由上(top.html)下(bottom ...
- js刷新页面方法 -- (转)
1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里 ...
- 利用js刷新页面方法
1,reload 方法,该方法强迫浏览器刷新当前页面. location.reload(force) 如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-S ...
- location.hash属性介绍
location.hash属性介绍 例如URL: http://wwww.a.com/index#rhythmk 通过location.hash 我们将获取到 #rhythmk. 默认浏览器会滚动至i ...
随机推荐
- MyISAM VS InnoDB
A.构成上的区别: InnoDB只在磁盘上存储一个文件.frm 每个MyISAM在磁盘上存储成三个文件.第一个文件的名字以表的名字开始,扩展名指出文件类型: 文 ...
- npm报错npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-03-15T01_48_14_769Z-debug.log
全局更新 npm npm i npm -g 就ok了
- 002-JVM运行时数据区【内存模型】
一.概述 JVM定义了不同运行时数据区,他们是用来执行应用程序的.某些区域随着JVM启动及销毁,另外一些区域的数据是线程性独立的,随着线程创建和销毁. 1.1.jvm自身物理结构 1.2.java内存 ...
- Oracle学习笔记—常用函数
这里记录一些oracle常用的函数. TO_NUMBER()函数 将字符串类型转换成一个 number 类型的值. SELECT TO_NUMBER('100.00') FROM DUAL; TO_C ...
- More on Class Loading and Initialization
上一篇博客中对于类的加载和初始化进行了详细的说明,但上一篇博客代码中的main()所在的类为导出类, 对其中一些问题的理解可能会引起误导和不明确,所以补充这篇博客进一步说明.以下面的代码为例进行说明: ...
- easyui-combobox 中多选的默认值设置、获取多选值及JS包含字符串、删除字符串
1.项目中使用到combobox的多选值及相关操作,不多说,直接上代码: <input id="education" name="education" c ...
- offsetLeft与style.left的区别
参考:http://www.cnblogs.com/woshilee/articles/1951457.html offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定 ...
- iOS iPhone X 适配启动图片
刚出了Xcode9正式版 迫不及待地下载 使用了 保密了这么久的iPhone X 模拟器 运行起来这个样子 上下都留白不正常 这必须匹配新的启动图才行,马上查苹果开发文档 get it!!!! 添加了 ...
- Python编程-函数进阶
一.函数对象 函数是第一类对象,即函数可以当作数据传递 1 可以被引用 2 可以当作参数传递 3 返回值可以是函数 4 可以当作容器类型的元素 def foo(): print('from foo') ...
- shell的符号总结
1.命令替换符:先执行符号内的命令 反引号``:旧格式 $():新格式 2.字符串界定符: 单引号:保持引号内 的字符的字面值. 双引号:有些情况特殊. $echo '`date`' #不会执行`da ...