左侧栏用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.技术不太成熟，给大家做个参考。