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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值