用cookie解决选项卡问题刷新后保持原来的选项

红烧四喜丸子

已于 2022-06-15 15:46:32 修改

阅读量217

点赞数 1

文章标签： javascript html elementui

于 2022-06-15 15:40:06 首次发布

本文链接：https://blog.csdn.net/weixin_56529964/article/details/125298378

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
    <style>
        .ac {
            background-color: red;
        }

        .cont {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <button class="item ac">按钮1</button>
        <button class="item">按钮2</button>
        <button class="item">按钮3</button>
        <div class="cont" style="display:block ;">内容1</div>
        <div class="cont">内容2</div>
        <div class="cont">内容3</div>
    </div>
</body>

<script>
    window.onload = () => {
        var btn = document.querySelectorAll('.box button')
        var con = document.querySelectorAll('.box div')
        let num = 0
        tab = (num) => {
            for (var i = 0; i < btn.length; i++) {
                btn[i].className = ''
                con[i].style.display = 'none'
            }
            btn[num].className = 'ac'
            con[num].style.display = 'block'
        }
        for (var i = 0; i < btn.length; i++) {
            btn[i].index = i
            btn[i].onclick = function () {
                tab(this.index)
                set('TabValue', this.index)
            }
        }
        if (get('TabValue')) {
            num = get('TabValue')
            tab(num)
        }
    }
</script>

</html>

引入的js

function set(name, value, iDay) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay);

    document.cookie = `${name}=${value}; path=/;expires=${oDate}`;
}

function get(name) {
    let arr = document.cookie.split('; ');

    for (var i = 0; i < arr.length; i++) {
        let item = arr[i].split('=');

        if (item[0] == name) {
            return item[1];
        }
    }
}

function deleteCookie(name) {
    setCookie(name, 'ccc', -1)
}