左侧栏用cookie存储选择状态

1.插入jquery.cookie.js



jquery和cookie的路径根据自己的路径更改

2.html代码

//上方菜单栏
      

//下方左侧栏

3.js代码

//cookie菜单栏选中
    //给每个a标签添加点击事件
    $('#sys-menu').find("a").click(function () {
        $('#sys-menu').find("a").parent().width(50);
        var index = $("#sys-menu").find("a").index(this);
        $.cookie("current",index,{"path":"/", expires:30});
        console.log(document.cookie);
    });

    $(function(){

        var dt = new Date();
        dt.setSeconds(dt.getSeconds() + 60);
        document.cookie = "cookietest=1; expires=" + dt.toGMTString();
        var current = $.cookie("current");
        //cookie记录已点击的index
        console.log(document.cookie);
        if($.cookie("current") != null){
            var num = $.cookie("current");
            $('#sys-menu').find("a").eq(num).parent().width("100%");
        }else{
            $("#sys-menu").find("a").eq(0).parent().width("100%");
        }
    });

    //清除cookie
    $(".nav_main li").click(
        function () {
    //清除cookie
            $.cookie("current",0,{"path":"/", expires:0})
        }

    );

4.效果图


image.png

image.png

image.png

5.因为我用的装饰器比较多,所以每次点击不同页面都要清除cookie,在每次点击上方菜单栏时重置cookie为0,这样点击其他地方的时候就会自动选中第一个页面。

6.技术不太成熟,给大家做个参考。

你可能感兴趣的:(左侧栏用cookie存储选择状态)