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的路徑根據(jù)自己的路徑更改

2.html代碼

//上方菜單欄
      <ul class="nav_main">
            <li><a th:href="">所有課程</a></li>
            <li><a th:href="}">教務(wù)列表</a></li>
            <li><a th:href="">個人中心</a></li>
            <li><a class="current" ">系統(tǒng)管理</a></li>
            <li><a th:href="">退出</a></li>
        </ul>

//下方左側(cè)欄
<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}">教學(xué)課程管理</a>
            </li>
            <li class="type">
                <span class="type-icon"></span>
                <a th:href="@{/teach/examineInformationStu}">權(quán)限管理</a>
            </li>
            <li class="experience">
                <span class="experience-icon"></span>
                <a>用戶管理</a>
            </li>
            <li class="notice">
                <span class="notice-icon"></span>
                <a>學(xué)期管理</a>
            </li>
            <li class="study">
                <span class="study-icon"></span>
                <a>可視化管理</a>
            </li>
            <li class="resource">
                <span class="resource-icon"></span>
                <a>版本設(shè)置</a>
            </li>
        </ul>
    </nav>
</div>

3.js代碼

//cookie菜單欄選中
    //給每個a標(biāo)簽添加點擊事件
    $('#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.技術(shù)不太成熟，給大家做個參考。