如何使用jquery.cookie记录访问的菜单状态

1、进行web开始的时候，首先在页面中需要引入两个js库，方便后续使用js库。及进行代码编写，特别注意，jquery cookie是依赖jquery库，引入的时候要将jquery放在前面

2、我们就以如下代码为例，注意一下地方，有一个外层元素，包含菜单<div class="row" id="footer"></div>正footer元素需要注意，你可以换成其他的名称

3、开始编写js代码，代码如下截图，红色部分需要特别注意的footer为步骤二代码里面的footer给每个a标签添加点击事围泠惶底件$("#footer").find("a").click(function(){//移除a里面的样式 $("#footer").find("a").removeClass("active");//当前选择的下标 var index = $("#footer").find("a").index(this);//记录下标 $.cookie("current", index);//同时添加记录样式 $(this).addClass("active"); });

4、判断coo氯短赤亻kie中是否已经存放的有用户的状态if ($.cookie("current")!= nu造婷用痃ll){//获取记录的状态 var num = $.cookie("current");//当前下标的元素添加样式 $("#footer").find("a").eq(num).addClass("active"); }

5、这一步注意是对前两步的总结，需要注意的部分，已经标红<script type="text/枣娣空郅javascript">$(function() { //cookie记录已点击的index if ($.cookie("current")!= null){ var num = $.cookie("current"); $("#footer").find("a").eq(num).addClass("active"); } //给每个a标签添加点击事件 $("#footer").find("a").click(function(){ $("#footer").find("a").removeClass("active"); var index = $("#footer").find("a").index(this); $.cookie("current", index); $(this).addClass("active"); });});</script>

6、下图我运行的结果，打开页面记录了用户访问的记录，同时进行操作时不用在后台麻烦的记录用户状态

7、同时我们可以在浏览器中查看我们记录cookie的状态，方便我们调试，下图为浏览器cookie的值