使用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');

你可能感兴趣的:(jquery,cookie)