How to keep active class when changing pages

Question

I am trying to add an active class to nav item, depending what page your on. I am using this script:

<script type="text/javascript">
    $(document).ready(function () {
        $("#side-bar a").click(function () {
            var id = $(this);

            $(id).siblings().find(".active").removeClass("active");
            $(id).addClass("active");
            localStorage.setItem("selectedolditem", id);
        });

        var selectedolditem = localStorage.getItem('selectedolditem');

        if (selectedolditem !== null) {
            $(selectedolditem).siblings().find(".active").removeClass("active");
            $(selectedolditem).addClass("active");
        }
    });
</script>

See full jsfiddle here: https://jsfiddle.net/ebo7hLo9/ It adds the active class, but it loads a new page, it disappears. What am I doing wrong?

score 2 · Accepted Answer · edited May 23 '17 at 12:28

https://jsfiddle.net/ebo7hLo9/10/ - here's a fiddle!

$(document).ready(function () {

            $("#side-bar a").click(function () {
                var id = $(this);

                $(".active").removeClass("active");
                $(id).addClass("active");
                localStorage.setItem("selectedolditem", $(id).text());

            });

            var selectedolditem = localStorage.getItem('selectedolditem');

            if (selectedolditem !== null) {

                $("a:contains('" + selectedolditem + "')").addClass("active");
            }
        });

Your code was having issues remembering what element to grab. I think it's due to the web storage API's unfamiliarity with objects. Instead I got the text from the element that was selected, stored it in localStorage and on page load matched it with the correct element. Also there was part of your code that was dealing with finding the class "active" within the siblings() of the selected element and removing it. That complex of code is largely unnecessary. I replaced it with the class selector $(".active")

I didn't change this in the code, but I'd advise against using localStorage in favor of sessionStorage so that the storage will clear itself on tab/browser close.

For more info take a look at this previous stackoverflow post: Storing Objects in HTML5 localStorage

Awesome this works. So one more thing, is there any way to apply the active class if you get to the page by typing it in url directly, rather than clicking on it in navigation? — Garrettj944, Apr 28 '15 at 16:28
@Garrettj944 If you typed in the URL you could use query parsing, http://stackoverflow.com/questions/2090551/parse-query-string-in-javascript Or you could remove localStorage and place an attribute class on the specified element stating that it's active. It depends if the urls are separate pages or anchors in the same page. — zfrisch, Apr 28 '15 at 22:16

score 0 · Answer 2 · answered Apr 27 '15 at 23:34

Here is a possible solution: https://jsfiddle.net/6yyLpma1/

              $("#side-bar a").click(function () {
                    var id = $(this);

                    $('#side-bar').find(".active").removeClass("active");
                    $(id).addClass("active");
                    localStorage.setItem("selectedolditem", id);
                });

Instead of $(id).siblings() use $('#side-bar'). Use the same logic in other location.

score 0 · Answer 3 · answered Apr 28 '15 at 00:06

Using data elements and a delegate function: https://jsfiddle.net/ebo7hLo9/12/

HTML

<span id="delegateAnchor">
    <div id="side-bar">
        <ul>
            <li><a href="#" data-desc="home">Home</a></li>
            <li><a href="#" data-desc="whoAreWe">Who we are</a></li>
            <li><a href="#" data-desc="services">Services</a></li>
            <li><a href="#" data-desc="whatToExpect">What to expect</a></li>
            <li><a href="#" data-desc="representClients">Representative clients</a></li>
            <li><a href="#" data-desc="successStories">Success stories</a></li>
            <li><a href="#" data-desc="currentLit">Current litigation</a></li>
            <li><a href="#" data-desc="whatIfYouCould">What if you could not be a doctor?</a></li>
        </ul>
    </div>
</span>

Javascript

$(document).ready(function () {
    $('#delegateAnchor').on('click', '#side-bar a', function() {
        var $this = $(this);
        var linkId = $this.data('desc');

        $this.closest('ul').find('a').removeClass("active");
        $this.addClass("active");

        localStorage.setItem("menuSelection", linkId);
    });

    var selectedLinkId = localStorage.getItem("menuSelection");

    if (selectedLinkId !== null) {
        $('#side-bar a[data-desc="'+ selectedLinkId +'"]').trigger("click");
    }
});

How to keep active class when changing pages

3 Answers3

Linked