jQuery remember click with persistent cookie

Posted on 2011-10-24
Last Modified: 2012-05-12
Hi Experts,

I have a navigation menu which is reloaded every time you load a page. I would like to add a class to the last clicked link in the navigation which persists when the next page loads i.e when I click on the Second Page link, SecondPage.html loads and the link still has that class, indicating that this is the active page.

I'd like to do this with jQuery and a persistent cookie. With the code attached, I can get the click to add the class to the selected link and remove it from the others. I'm just not sure how to add in the cookie code.

Any help would be greatly appreciated.
<script type="text/javascript">

    $("#nav h3.Heading").click(function () {  

        $("#nav h3.Heading").removeClass("activeLink"); 


Open in new window

Question by:b24
    LVL 81

    Expert Comment


    Author Comment

    Hi leakim971,

    I'll try to get something from that thread but I really don't know much about it and trying to adapt it from a button input to a navigation click might prove tricky for me.


    Author Comment

    Hi experts,

    Can anyone else offer some help with this question?

    Many Thanks!
    LVL 81

    Accepted Solution

    using :

    if you want to record the state of something your need to be able to point this element.
    you can point it multiple way :
    - a unique name (form field)
    - a unique class
    - a unique id
    - a unique position (ex : the third div)

    once you find a ultimate way to point each of element for which you want to save the class, use $.cookie to save an retrieve

    for example using position from other element :

    var position = $(this).index("#nav h3.Heading");
    $.cookies("position", position); // set the cookie for the current activeLink

    at page load:

    var position = $.cookies("position"); // retrieve the last activeLink position
    if( position != null ) $("#nav h3.Heading:eq(" + position  + ")");


    Author Comment

    Hi leakim971,

    I need to be able to click on a link, add a class to it and then remember which link has been clicked so that the class is still attached when the page loads.

    I don't think position is going to work for that.


    Author Comment

    Hi Leakim971,

    I've decided to abandon the cookie idea and go for a location.pathname solution instead. That doesn't mean that the solution you offered above wouldn't have worked, I just decided to go in a different direction.

    Thanks very much for your help.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Basic understanding on "OO- Object Orientation" is needed for designing a logical solution to solve a problem. Basic OOAD is a prerequisite for a coder to ensure that they follow the basic design of OO. This would help developers to understand the b…
    David Varnum recently wrote up his impressions of PRTG, based on a presentation by my colleague Christian at Tech Field Day at VMworld in Barcelona. Thanks David, for your detailed and honest evaluation!
    Hi everyone! This is Experts Exchange customer support.  This quick video will show you how to change your primary email address.  If you have any questions, then please Write a Comment below!
    Internet Business Fax to Email Made Easy - With eFax Corporate (, you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now