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') );
});

});