CSS jQuery活动选项卡选择

问题描述

我的网页上有一个导航栏，其中包含的链接，如果他们是最后点击的链接，我想用不同的风格。我已经设置了我的CSS像这样：

I've a navigation bar on my page, containing links that I would like to style differently if they are the last clicked link. I've set up my CSS like this:

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

我在我的布局文件中有一个jQuery脚本， / p>

and I have a jQuery script in my layout file that looks like this:

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

每当我点击一个链接，我得到所需的效果，但只有到下一页加载。当下一页加载时，我点击的链接没有.active css类。

Whenever I click a link, I get the desired effect, but only until the next page loads. When the next page loads, the link I just click does not have the .active css class. How can I make this class persist between different pages?

推荐答案

要保留这些值，您可以使用javascript cookies

For retaining the values you can use javascript cookies

从此处下载并添加插件

Download and include the plugin from here 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活动选项卡选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！