CSS jQuery Active Tab Selection

Question

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

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

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?

Is the page dynamically generated, for example with PHP? then you could simply add the class server side. — Thomas
– Thomas, Commented Jul 20, 2012 at 11:15
Can't you add the class server side by checking the current file name / URL and comparing it with the link href. Would definitely be better than cookies — Thomas
– Thomas, Commented Jul 20, 2012 at 11:25

Satya Teja · Accepted Answer · 2012-07-20 11:20:20Z

1

For retaining the values you can use javascript cookies

Download and include the plugin from here https://github.com/carhartl/jquery-cookie

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

});

answered Jul 20, 2012 at 11:20

Satya Teja

6166 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS jQuery Active Tab Selection

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related