前端ABC<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cookie_tab</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
color: #FFF;
}
ul,li {
list-style: none;
}
.fl {
float: left;
}
.tab {
margin: 0 auto;
overflow: hidden;
width: 600px;
height: 300px;
text-align: center;
}
.tab-ctrl {
display: flex;
width: 100%;
height: 60px;
line-height: 60px;
flex: 1;
}
.tab-ctrl li {
flex: 1;
background-color: #CCC;
}
.tab-ctrl li.on {
background-color: #666;
}
.tab-con {
width: 100%;
height: 240px;
line-height: 240px;
flex: 1;
background-color: #999;
}
.tab-con li {
display: none;
width:100%;
height: 100%;
}
.tab-con li.active{
display: block;
}
</style>
</head>
<body>
<div id="tab1" class="tab">
<ul class="tab-ctrl fl">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="tab-con fl">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
//01 DOMready函数
function domReady(fn) {
if(document.addEventListener) {
document.addEventListener('DOMContentLoaded',function(){
document.removeEventListener('DOMContentLoaded',arguments.callee,false);
fn();
},false);
} else {
document.onreadystatechange = function() {
if(this.readyState == 'complete') {
fn();
document.onreadystatechange = null;
}
};
}
}
//02 封装cookie类 （功能： 存储，查询，删除）
var ck = {
set: function(key,value,expires,path) {
var oDate = new Date();
var defaultExpire = expires || 30;
oDate.setTime(oDate.getTime() + defaultExpire*24*60*60*1000);
expires = oDate.toGMTString();
path = path || '/';
document.cookie = key + '=' + value + '; EXPIRES=' + expires + '; PATH=' + path + '; ';
},
select:function(key) {
var cookieStr = document.cookie;
cookieStr = cookieStr.replace(/\s+/g,'');
var tempValue = '';
var arr = cookieStr.split(';');
for(var i=0; i<arr.length; i++){
if(arr[i].split('=')[0] === key){
tempValue = arr[i].split('=')[1];
}
}
return tempValue;
},
delete:function(key) {
var oDate = new Date('1970-1-1');
document.cookie = key + '=' + '.' + '; EXPIRES=' + oDate.toGMTString() + '; PATH=/; ';
}
};
//03 删除class的方法
function deleteClass(domEle,className){
var classStr = domEle.className;
var regExp = new RegExp('\\b'+ className +'\\b');
domEle.className = classStr.replace(regExp,'');
}
//04 根据class选择元素的方法
function getByClass(ele,className) {
if(ele.getElementsByClassName){
return ele.getElementsByClassName(className);
}else{
var resultArr = [];
var eleArr = ele.getElementsByTagName('*');
var regExp = new RegExp('\\b'+ className +'\\b');
for(var i=0; i<eleArr.length; i++){
if(regExp.test(eleArr[i].className)){
resultArr.push(eleArr[i]);
}
}
return resultArr;
}
}
//05 实现选项卡
domReady(function(){
var oTab1 = document.getElementById('tab1');
var aCtrl = oTab1.querySelectorAll('.tab-ctrl li');
var aCon = oTab1.querySelectorAll('.tab-con li');
// tab 实现方法
function tab(index){
for(var i=0; i<aCtrl.length; i++){
deleteClass(aCtrl[i],'on');
aCon[i].style.display = 'none';
}
aCtrl[index].className = aCtrl[index].className + ' on';
aCon[index].style.display = 'block';
}
var tabIndexs = parseInt(ck.select('tab_index'));
console.log(tabIndexs);
if(tabIndexs || tabIndexs == 0){
tab(tabIndexs);
}
for(var i=0; i<aCtrl.length; i++){
(function(index){
aCtrl[i].onclick = function(){
ck.set('tab_index',index);
tab(index);
}
})(i);
}
});
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » cookies存储选项卡