jquery - CSS jQuery 事件选项卡选择

Question

我的页面上有一个导航栏，其中包含一些链接，如果它们是最后一次单击的链接，我想采用不同的样式。我已经像这样设置了我的 CSS:

#nav li a.active {
  background-color: #F2F2F2;
  color: #000000;
  font-weight: bold;
}

我的布局文件中有一个 jQuery 脚本，如下所示:

$('#nav li a').click(function() {
  $('#nav li a.active').removeClass('active');
  $(this).addClass('active');
});

每当我单击一个链接时，我都会获得所需的效果，但只会在下一页加载之前出现。当下一页加载时，我刚刚单击的链接没有 .active css 类。我怎样才能让这个类在不同的页面之间持久存在？

Answer 1

为了保留您可以使用 javascript cookie 的值

从这里下载并包含插件 https://github.com/carhartl/jquery-cookie

并添加这个 JS

document.ready(function(){

if($.cookie( "prev") != '')
{
$('#'+ $.cookie( "prev")).addClass('active');
}

$('#nav li a').click(function() {
  $('#nav li a.active').removeClass('active');
  $(this).addClass('active');
$.cookie( "prev", $(this).attr('id') );
});

});