使用jquery cookie.js记录当前所点击过的菜单

网页头部是一个这样的菜单,通过include导入的,想给每个点击的菜单加上样式 class="active", 想到用jquery.cookie.js来做。百度搜索了下后发现有相关代码

网上代码还是有缺陷的 比如

//给每个a标签添加点击事件

$("#footer").find("a").click(function(){

$("#footer").find("a").removeClass("active");

var index = $("#footer").find("a").index(this);

$.cookie("current", index);

$(this).addClass("active");

});

这是网上部分代码, 他这里cookie 并没有设置cookie 的 path 所以在调试的时候 alert 索引的数字 各种不对 然后又百度了jquery 有关path的使用发现

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

注：在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设

置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这

个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突） 。

我这里的场景就是这样 多个页面都是通过include 导入的header 所以修改了网上代码后 的出来的数字就是对的了，这里贴出我的部分代码

$(function() {

$(".nav-list").find("a").click(function() {

var index = $(".nav-list").find("a").index(this);

$.cookie("current", index, { path: '/'});

$(".nav-list").find("a").removeClass("active");

$(this).addClass('active');

});

if($.cookie("current") != null) {

var index = $.cookie("current");

$(".nav-list").find("a").eq(index).addClass("active");

} else {

$(".nav-list").find("a").removeClass("active");

$(".nav-list").find("a").eq(0).addClass("active");

}

});

后期改动 这种方式还是有一定的局限性 比如 通过其他 链接进入首页 的

首页赛事这个item还是无法变成样式acive的样式所以还是在后台加入

model.addAttribute("index", 2);

前台js通过索引去给对应的item加入active的样式,代码如下

上面cookie的代码可以用来参考参考

$(".nav-list").find("a").remove('active');

$(".nav-list").find("a").eq(parseInt('${index}')).addClass('active');