CSS jQuery的活动标签选择

我在我的页面上有一个导航栏，包含我想不同风格的链接，如果它们是最后点击的链接。我建立了我的CSS是这样的：CSS jQuery的活动标签选择

#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类。我怎样才能让这个类在不同的页面之间持续存在？

来源

2012-07-20 Richard Stokes

是动态生成的页面，例如用PHP？那么你可以简单地添加类服务器端。 – Thomas 2012-07-20 11:15:58

这是一个Sinatra应用程序，所以该页面使用Ruby生成 – 2012-07-20 11:23:09

您不能通过检查当前文件名/ URL并将其与链接href进行比较来添加类服务器端。肯定会比饼干更好 – Thomas 2012-07-20 11:25:41

对于保留值，您可以使用JavaScript饼干

下载，包括从这里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')); 
}); 

});

来源

2012-07-20 11:20:20

CSS jQuery的活动标签选择

回答

相关问题