js选项卡（Cookie记录选项）

最新推荐文章于 2023-05-03 21:56:03 发布

浮 · 白

最新推荐文章于 2023-05-03 21:56:03 发布

阅读量118

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_66127892/article/details/125328934

版权

HTML JavaScript DOM操作 cookie 事件监听

关键词由CSDN通过智能技术生成

html代码：

<!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>
    <style>
        .btn {
            background-color: red
        }

        div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            display: none;
        }

        .con {
            display: block;
        }
    </style>
</head>

<body>
    <button class="btn">1</button><button>2</button><button>3</button>
    <div class="con">1</div>
    <div>2</div>
    <div>3</div>
</body>
<script src="./js//index.js"></script>
<script>
    var btn = document.querySelectorAll('button')
    var con = document.querySelectorAll('div')
    function fn(name) {
        for (var i = 0; i < btn.length; i++) {
            btn[i].className = ''
            con[i].className = ''
        }
        btn[name].className = 'btn'
        con[name].className = 'con'
    }
    if (getCookie('index')) {
        var count = getCookie('index')
        fn(count)
    }
    for (var i = 0; i < btn.length; i++) {
        btn[i].index = i
        btn[i].onclick = function () {
            fn(this.index)
            setCookie('index', this.index, 1)
        }
    }
</script>

</html>

js引入文件

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

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

function getCookie(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)
}