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 cookies

从此处下载并添加插件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') );
});

});

CSS jQuery活动选项卡选择

1 个答案: