怎么用cookie解决选项卡问题刷新后怎么保持原来的选项?
什么是cookie?
Cookies虽然一般都以英文名呈现,但是它还是有一个可爱的中文名“小甜饼”。Cookies是指服务器暂存放在你的电脑里的txt格式的文本文件资料,主要用于网络服务器辨别电脑使用。比如浏览网站时,Cookies 记录下来你输入的一些资料和信息。再访问同一个网站,就会依据Cookie里的内容来判断使用者,送出特定的信息内容给你。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#wrap{
width: 400px;
height: 340px;
border: 1px solid black;
margin: 100px auto;
}
ul{
height: 34px;
border-bottom: 1px solid black;
line-height: 34px;
}
li{
float: left;
width: 132px;
height: 33px;
border-left: 1px solid black;
text-align: center;
cursor: pointer;
}
#box div{
text-align: center;
line-height: 100px;
}
.on{
background: pink;
}
</style>
<script>
window.onload=function(){
var oDox=document.getElementById("wrap");
var aLi=document.getElementsByTagName("li");
var aDiv=oDox.getElementsByTagName("div"); for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function(){
for(var i=0;i<aLi.length;i++){
aLi[i].className="";
aDiv[i].style.display="none";
setCookie("index",this.index,1)
}
this.className="on";
aDiv[this.index].style.display="block";
}
}
//判断是有cookie值
if(getCookie("index")){
for(var i=0;i<aLi.length;i++){
aLi[i].className='';
aDiv[i].style.display='none'
}
aLi[getCookie('index')].className='on';
aDiv[getCookie('index')].style.display='block';
}
///设置cookie
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';path=/;expires='+oDate;
}else{
document.cookie=name+'='+value+';path=/';
}
};
//获取cookie
function getCookie(name){
var arr=document.cookie.split("; ");
for(var i=0;i<arr.length;i++){
var arr1=arr[i].split("=");
if(arr1[0]==name){
return arr1[1];
} } return "";
}
}
</script>
</head>
<body>
<div id="wrap">
<ul>
<li class="on">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div>tab1</div>
<div>tab2</div>
<div>tab3</div>
</div>
</body>
</html>
怎么用cookie解决选项卡问题刷新后怎么保持原来的选项?的更多相关文章
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- 基于cookie实现zTree树刷新后,展开状态不变
1.除了引用jQuery和zTree的JS外,引用cookie的JS: <script type="text/javascript" src="~/Scripts/ ...
- 关于iOS11上MJRefresh tabview刷新后,重新加载另一组数据, 回不到顶部或者头尾显示混乱等问题解决
MJRefresh在iOS11上存在很多bug 比如在iphoenx上首尾仍会显示的问题 刷新数据后tableview置顶不上去等问题 虽然官方给出了适配方案 但是问题还没有的到解决 比如tabvi ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- Vuex 页面刷新后store保存的数据会丢失 取cookie值
在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- 解决vuex数据页面刷新后初始化问题
在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 利用storage缓存来实现vuex数据的刷新问题 ...
- Android list刷新后仍然定位到原来的位置,解决。
问题: 有一个list,点击item时会做一些事情,然后重新加载数据,此时希望点击重新刷新后item还在原来的位置,而不是跳转到开头. 实现如下: 1.listview添加监听setOnScrollL ...
随机推荐
- Android 代码里设置ImageView的src和background
设置ImageView的src: image.setImageDrawable(getResources().getDrawable(R.drawable.blackk)); String path= ...
- AC日记——[HAOI2007]理想的正方形 P2216
[HAOI2007] 理想的正方形 思路: 正解多个单调队列: 但是我用树套树水了过去: 来,上代码: #include <cstdio> #include <cstring> ...
- vue element-ui Tabs 标签页实现【更多】功能
element-ui Tabs本身是没有更多功能的,如果在外边添加一个更多按钮,又非常不好看, 而利用API中Tabs Attributes的before-leave勾子方法可以实现这个功能, 简单P ...
- 聊聊、Zookeeper 客户端 ZkClient
[ZkClient] ZkClient 是 GitHub 上一个开源的客户端,如果我们用 Maven 来管理工程,则引用如下. <dependency> <groupId>o ...
- Another unnamed CacheManager already exists in the same VM
今天学习Spring 缓存机制.遇到不少问题~ 好不easy缓存的单元測试用例调试成功了,在同一项目下单元測试另外一个文件时,发生了异常: org.springframework.beans.fact ...
- [Django]中建立数据库视图
Django中建立数据库视图 Django中没有建立视图的接口.假设要建立一个视图须要一些手动的改变. 这里使用的Django 版本号>1.5, 使用的数据库为mysql 第一步 建立视图,比如 ...
- jsp页面中,动态调用系统时间的实现
在做WEB项目时,经常会须要 在页面中显示当前时间,以下介绍一个简单的调用系统时间的方法,效果如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvczI5 ...
- js执行顺序总结
参考博文:http://www.2cto.com/kf/201401/273825.html http://www.jb51.net/article/44123.htm http://zhidao.b ...
- IT项目管理-----给年轻工程师的十大忠告
http://blog.csdn.net/hbqhdlc/article/details/6201179给年轻工程师的十大忠告 诸位,咱当电子工程师也是十余年了,不算有出息,环顾四周,也没有看见几个有 ...
- webdriver.py--解说
一.全局操作类 start_session 使用指定的desired capabilities创建一个会话(session)start_client 新建一个webdriver会话session前调用 ...