CSS jQuery活动选项卡选择

我的页面上有一个导航栏，其中包含的链接如果是最后一次单击的链接，我希望采用不同的样式。我的CSS设置如下：

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

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

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

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

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

---

每当我点击一个链接，我都会得到想要的效果，但只有在下一页加载之前。当下一页加载时，我刚才单击的链接没有.active css类。如何使此类在不同页面之间持久化？

用于保留可以使用javascript 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') );
});

});

---

页面是否是动态生成的，例如使用PHP？然后，您可以简单地添加类服务器端。这是一个Sinatra应用程序，因此页面是使用Ruby生成的。您可以通过检查当前文件名/URL并将其与链接href进行比较来添加类服务器端。肯定比饼干好