左侧栏用cookie存储选择状态

1.插入jquery.cookie.js

<script type="text/javascript" th:src="@{/js/common/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/common/jquery.cookie.js}"></script>

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

2.html代码

//上方菜单栏
      <ul class="nav_main">
            <li><a th:href="">所有课程</a></li>
            <li><a th:href="}">教务列表</a></li>
            <li><a th:href="">个人中心</a></li>
            <li><a class="current" ">系统管理</a></li>
            <li><a th:href="">退出</a></li>
        </ul>

//下方左侧栏
<div class="col-md-2">
    <nav>
        <ul id="sys-menu">
            <li class="course">
                <span class="course-icon"></span>
                <a>课程库管理</a>
            </li>
            <li class="know">
                <span class="know-icon"></span>
                <a th:href="@{/teach/examineInformationStu}">教学课程管理</a>
            </li>
            <li class="type">
                <span class="type-icon"></span>
                <a th:href="@{/teach/examineInformationStu}">权限管理</a>
            </li>
            <li class="experience">
                <span class="experience-icon"></span>
                <a>用户管理</a>
            </li>
            <li class="notice">
                <span class="notice-icon"></span>
                <a>学期管理</a>
            </li>
            <li class="study">
                <span class="study-icon"></span>
                <a>可视化管理</a>
            </li>
            <li class="resource">
                <span class="resource-icon"></span>
                <a>版本设置</a>
            </li>
        </ul>
    </nav>
</div>

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