cookies存储选项卡

<!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存储选项卡

赞 (2)
分享到:更多 ()

发表评论 0