Store a clicked link state using jQuery?

Question

$('#nav a').click(function () {  
    $('#nav a').removeClass('current');  
    $(this).addClass('current');
    return false;  
});

My HTML is:

<ul id="nav">
<li><a class="current hoc" href="#spread1-anchor">Home</a> /</li>
<li><a class="bgc" href="#spread2-anchor">Background</a> /</li>
<li><a class="apc" href="#spread3-anchor">Approach</a> /</li>
<li><a class="clc" href="#spread4-anchor">Client</a> /</li>
<li><a class="sec" href="#spread5-anchor">Services</a> /</li>
<li><a class="coc" href="#spread5-anchor">Contact</a></li>
</ul>

And if it helps, my URL is: Karls Example site

Using the above jQuery code – how would I store the last clicked link when the user refreshes the page? Im a beginner with jQuery and even though I have seen answers out there, most of them are to do with sliders or accordions and so are much too complicated for me to understand at this stage of my learning curb! :)

Please could someone help and perhaps show how to implement the code or plugin too if one is required (I saw a cookies plugin on my travels around the net)

Answer 1

Do your links have IDs? If so, just store the ID in a cookie when clicked. So, something like this:

$('#nav a').click(function () {
  $.cookie('lastclicked',this.id);
  $('#nav a').removeClass('current');  
  $(this).addClass('current');
  return false;  
});

Using the jQuery cookie plugin reduces the annoyance factor of setting the cookie directly. On page load, look for the cookie (see documentation), read its value if present, and now you know the ID of the last clicked link.

Answer 2

First of all, you need a way to uniquely identifying the links - either id or the href attribute will do. Next, grab the code that will process the cookie for you. I'll be using the one from quirksmode.org.

You can store the unique identifier of the last used anchor like this:

$('#nav a').click(function(){
    $(this).addClass('current').siblings().removeClass('current');

    // Create a cookie that will last 30 days with 
    // the name "link" containing this anchor's id attribute
    createCookie('link', this.id, 30);
    return false;
});

When the next page loads, read the cookie like this:

var lastLink = readCookie('link');

if(lastLink){
    $('#' + lastLink).addClass('lastVisited');
}

Answer 3

I'd use the jQuery Address plugin instead of cookies, that way it would work across browser windows/tabs, and also it provides deep linking.

$('#nav a').click(function () {
  $.address.parameter('lastclicked', this.id);
  $('#nav a').removeClass('current');
  $(this).addClass('current');
  return false;
});

Answer 4

Why use cookies? Your links have a hash property, so I'd just manually set the hash of the location bar after the animation completes.

You didn't include the code that does the scroll animation, but store the hash value from the <a> that was clicked in a variable, then in a callback to the animation, set the location.hash.

Something like:

$('a').click(function() {
    // get the hash from the link
    var hash = this.hash;
    // Do the animation. (This is just example code.)
    // In the callback to the animation, manually set the location bar's hash
    $(document.body).animate({scrollLeft: 500}, 600, function() { 
                                                       location.hash = hash; 
                                                     });
    return false;
});

Then if the user refreshes the page, the hash will be there.

You can then also take the user directly to the proper section when the page loads by retrieving the hash with location.hash. This will make the sections bookmarkable.