利用cookie写原生刷新后不初始化选项卡

最新推荐文章于 2025-01-13 11:11:48 发布

你怎么生气了

最新推荐文章于 2025-01-13 11:11:48 发布

阅读量87

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_64387562/article/details/125420461

版权

HTML

 <div class="box">
        <ul>
            <li class="tit">001</li>
            <li>002</li>
            <li>003</li>
            <li>004</li>
        </ul>
        <ol>
            <li class="cont">001</li>
            <li>002</li>
            <li>003</li>
            <li>004</li>
        </ol>
    </div>

 * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .box {
            width: 400px;
            height: 300px;
            border: 2px solid skyblue;
            margin: 50px auto;
        }

        .box ul {
            width: 100%;
            height: 50px;
            display: flex;
        }

        .box ul li {
            width: 25%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        .box ol {
            width: 100%;
            height: 250px;
            background-color: #eee;
        }

        .box ol li {
            width: 100%;
            height: 100%;
            display: none;
            text-align: center;
            line-height: 250px;
            font-size: 25px;
            font-weight: 600;
        }

        .tit {
            background-color: #eee;
        }

        .cont {
            display: block !important;
        }

JavaScript

 let ul = document.querySelectorAll("div ul li");
    let ol = document.querySelectorAll("div ol li");
    const date = new Date();
    date.setDate(date.getDate() + 10);
    let index = document.cookie.slice(document.cookie.indexOf("I"), document.cookie.indexOf("b") + 3).split("=")[1];
    function Tab(num) {
        for (var i = 0; i < ul.length; i++) {
            ul[i].className = '';
            ol[i].className = '';
        }
        ul[num].className = 'tit';
        ol[num].className = 'cont';
    }
    Tab(index);
    for (var i = 0; i < ul.length; i++) {
        ul[i].index = i;
        ul[i].onclick = function () {
            Tab(this.index);
            document.cookie = `IndexTab=${this.index};expires=${date}`
        }
    }

评论吧!